HTML 및 CSS의 2D 변환 모듈-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 및 CSS의 2D 변환 모듈

php中世界最好的语言

Mar 13, 2018 am 11:36 AM

csshtml

이번에는 HTML과 CSS의 2D 변환 모듈을 가져왔습니다. HTML과 CSS의 2D 변환 모듈의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. 2D 변환 모듈

2D 변환 모듈

/*deg는 몇도를 나타내는 단위입니다*/
변환: 회전(45deg);/*
첫 번째 매개변수: 수평 방향
두 번째 매개변수: 세로 방향
*/transform:translate(100px, 0px);/*
첫 번째 매개 변수: 가로 방향
두 번째 매개 변수: 세로 방향
참고:
값이 1이면 변경되지 않음을 의미합니다
값이 다음보다 큰 경우 1이면 확대해야 한다는 의미입니다. 값이 1보다 작으면 축소해야 한다는 의미입니다. 가로 및 세로 크기 조정이 동일하면 매개변수로 약칭할 수 있습니다. *transform: scale(0.5, 0.5);*/transform: scale (1.5);/*
참고:
1. 여러 변환이 필요한 경우 공백으로 구분하세요
2. 요소이므로 회전 후 변환은 수평 변환이 아닙니다
* /transform:rotate(45deg)translate(100px,0px);

2D 변환 모듈

2.2D 변환 모듈 - 변형 중심점 HTML 및 CSS의 2D 변환 모듈

기본적으로 모든 요소는 중심점을 기준으로 회전합니다. 중심점 속성을 변형하여 기준점을 수정할 수 있습니다.

/*
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式
具体像素
百分比
特殊关键字
*/
/*transform-origin: 200px 0px;*/
/*transform-origin: 50% 50%;*/
/*transform-origin: 0% 0%;*/
/*transform-origin: center center;*/
transform-origin: left top;

3. : 500px;) 및 회전축(변환: RotateY(45deg );) HTML 및 CSS의 2D 변환 모듈

1.perspective: 500px;

1.1 원근이란 무엇입니까

가까운 것, 멀리 작은 것

1.2 참고 사항

원근감 속성은 가까운 크고 먼 작은 효과를 표시해야 하는 요소에 추가되어야 합니다. 상위 요소 위에

2.transform:rotateY(45deg);

회전하려는 축을 지정한 다음 그 뒤에 어떤 축을 추가하면 됩니다. 회전;

코드 예:

<html lang="en"> <head>     
<meta charset="UTF-8">     
<title>95-2D转换模块-旋转轴向</title>     
<style>         
*{             margin: 0;             padding: 0;         }         
ul{             width: 800px;             height: 500px;             margin: 0 auto;         }         
ul li{             list-style: none;             width: 200px;             height: 200px;             margin: 0 auto;             margin-top: 50px;             border: 1px solid #000;             
/*             1.什么是透视             近大远小            
2.注意点             一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面             */
             perspective: 500px;         }         ul li img{             width: 200px;             height: 200px;             
             /*perspective: 500px;*/
                      }         ul li:nth-child(1){             
                      /*默认情况下所有元素都是围绕Z轴进行旋转*/
                                   transform: rotateZ(45deg);         }         ul li:nth-child(2) img{             transform: rotateX(45deg);         }         ul li:nth-child(3) img{             /*             总结:             想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可             */             transform: rotateY(45deg);         }     </style> </head> <body> <ul>     <li>![](images/rotateZ.jpg)</li>     <li>![](images/rotateX.jpg)</li>     <li>![](images/rotateY.jpg)</li> </ul> </body> </html>

HTML 및 CSS의 2D 변환 모듈 IV. 포커 연습

<html lang="en"> 
<head>     
<meta charset="UTF-8">     
<title>96-2D转换模块-练习</title>
     <style>         
     *{             margin: 0;             padding: 0;         }         
     p{             width: 310px;             height: 438px;             border: 1px solid #000;             
     background-color: skyblue;             margin: 100px auto;             perspective: 500px;         }              
              p img{             transform-origin: center bottom;             transition: transform 1s;         }
                       p:hover img{             transform: rotateX(80deg);         }     
                       </style> </head> <body> <p>     ![](images/pk.png) </p> 
    </body> 
</html>

HTML 및 CSS의 2D 변환 모듈 5. 포토 월

<html lang="en">
 <head>
      <meta charset="UTF-8">
           <title>97-2D转换模块-相片墙</title>
                <style>
                         *{             margin: 0;             padding: 0;         }
                                  ul{             height: 400px;             border: 1px solid #000;
                                    background-color: skyblue;             margin-top: 100px;
                                     text-align: center;         }
                               ul li{             list-style: none; 
                                           width: 150px;             height: 200px;             
                                           background-color: red;             display: inline-block;
                                            //转换成行内块级元素,用于水平排版            
                                    margin-top: 100px;             transition: all 1s;            
                                     position: relative;             box-shadow: 0 0 10px;         }        
                                   ul li:nth-child(1){             transform: rotate(30deg);         } 
                                   ul li:nth-child(2){             transform: rotate(-40deg);         } 
                                   ul li:nth-child(3){             transform: rotate(10deg);         }
                                   ul li:nth-child(4){             transform: rotate(45deg);         }         
                                   ul li img{             width: 150px;             height: 200px; 
                                               border: 5px solid #fff;             box-sizing: border-box;
                                                        }         
                                   ul li:hover{             /*transform: rotate(0deg);*/  
                                              /*transform: none;*/             transform: scale(1.5);
                                               //之前的旋转被层叠掉, 只执行放大             
                                               z-index: 998;  
                                               //显示在最上面
                                               }   
             </style> 
    </head> 
    <body> 
              <ul> 
                <li>![](images/1.jpg)</li>     
                <li>![](images/2.jpg)</li>     
                <li>![](images/3.jpg)</li>     
                <li>![](images/4.jpg)</li> 
              </ul>
     </body> 
</html>

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 기사

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.