CSS3 변환에는 어떤 속성이 있습니까?-프런트엔드 Q&A-php.cn

CSS3 변환에는 어떤 속성이 있습니까?

青灯夜游

풀어 주다： 2022-01-13 14:12:38

원래의

1581명이 탐색했습니다.

6가지 CSS3 변환 속성이 있습니다: 1. 변환; 2. 변환-스타일 4. 관점-원점;

CSS3 변환에는 어떤 속성이 있습니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3 변환은 요소를 이동, 크기 조정, 회전, 늘리거나 늘릴 수 있습니다.

CSS3 변환에는 어떤 속성이 있습니까?

css3 변형 속성(2D/3D 변형)

Property	Description	CSS
transform	2D 또는 3D로 변신	3
Transform-origin	을 사용하면 변형 요소 위치를 변경할 수 있습니다	3
transform-style	3D 공간에서 요소가 중첩되는 방식 지정	3
perspective	3D 요소가 표시되는 방식 지정 원근감	3
perspective-origin	3D 요소의 하단 위치 지정	3
backface-visibility	화면을 향하지 않을 때 요소가 표시되어야 하는지 정의합니다	3

예:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <style type="text/css">
			#rotate2D, #rotate3D {
			    width: 80px;
			    height: 70px;
			    color: white;
			    font-weight: bold;
			    font-size: 15px;
			    padding: 10px;
			    float: left;
			    margin-right: 50px;
			    border-radius: 5px;
			    border: 1px solid #000000;
			    background: red;
			    margin: 10px;
				transition:transform 2s;
				-webkit-transition:transform 2s; /* Safari */
			}
			#rotate2D:hover{
				transform: rotate(180deg);
			}
			#rotate3D:hover{
				transform: rotateY(180deg);
			}
        </style>
    </head>
    <body>
       <div id="rotate2D">2D 转换</div>
	   <div id="rotate3D">3D 转换</div>
    </body>
</html>

로그인 후 복사

CSS3 변환에는 어떤 속성이 있습니까?

확장 지식:

2D 변환 방법

function	description
matrix(n ,n, n,n , n,n)	은 6개 값의 행렬을 사용하여 2D 변환을 정의합니다.
translate(x,y)	은 X 및 Y축을 따라 요소를 이동하는 2D 변환을 정의합니다.
translateX(n)	은 X축을 따라 요소를 이동하는 2D 변환을 정의합니다.
translateY(n)	은 Y축을 따라 요소를 이동하는 2D 변환을 정의합니다.
scale(x,y)	은 요소의 너비와 높이를 변경하는 2D 크기 조정 변환을 정의합니다.
scaleX(n)	은 요소의 너비를 변경하는 2D 크기 조정 변환을 정의합니다.
scaleY(n)	은 요소의 높이를 변경하는 2D 크기 조정 변환을 정의합니다.
rotate(angle)	은 매개변수에 각도를 지정하여 2D 회전을 정의합니다.
skew(x-angle,y-angle)	은 X 및 Y축을 따라 2D 기울이기 변환을 정의합니다.
skewX(angle)	은 X축을 따라 2D 기울이기 변환을 정의합니다.
skewY(angle)	은 Y축을 따라 2D 기울이기 변환을 정의합니다.

3D 변환 방법

기능	설명
matrix3d(n,n,n,n,n ,n, n ,n,n,n,n,n,n,n,n,n)	16개 값을 사용하여 3D 변환 정의 4x4 행렬.
translate3d(x,y,z)	3D 변환을 정의합니다.
translateX(x)	X축에 사용된 값만 사용하여 3D 변환을 정의합니다.
translateY(y)	은 Y축에 사용되는 값만 사용하여 3D 변환을 정의합니다.
translateZ(z)	Z축에 사용된 값만 사용하여 3D 변환을 정의합니다.
scale3d(x,y,z)	3D 스케일링 변환을 정의합니다.
scaleX(x)	은 X축 값이 주어지면 3D 크기 조정 변환을 정의합니다.
scaleY(y)	은 Y축 값이 주어지면 3D 크기 조정 변환을 정의합니다.
scaleZ(z)	은 Z축 값이 지정된 3D 크기 조정 변환을 정의합니다.
rotate3d(x,y,z,angle)	3D 회전을 정의합니다.
rotateX(angle)	은 X축을 따라 3D 회전을 정의합니다.
rotateY(angle)	은 Y축을 따라 3D 회전을 정의합니다.
rotateZ(angle)	은 Z축을 따라 3D 회전을 정의합니다.
perspective(n)	3D 변환 요소의 투시도를 정의합니다.