CSS3에서 2D와 3D를 변환하는 방법

이 글은 CSS3의 2D 변환과 3D 변환에 대해 공유합니다. 이는 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

변환을 통해 요소를 이동하고, 크기를 조정하고, 늘리거나 늘릴 수 있습니다. 브라우저 호환성 문제에 주의해야 합니다. 프로그램을 작성할 때 명확하게 작성해야 합니다.

Chrome 및 Safari에는 접두사 -webkit-이 필요하고, Internet Explorer 9에는 접두사 -ms-가 필요합니다.

Internet Explorer 10 및 Firefox는 3D를 지원합니다. 변환했지만 Opera는 여전히 3D 변환을 지원하지 않습니다

추천 과정[css3]

2D 변환

translate()은 현재 위치에서 설정된 값으로 이동하는 것을 의미합니다. set 왼쪽 값과 위쪽 값

translate（100px,30px）//从左侧移动100px，从上往下移30px

rotate()는 요소의 시계 방향 회전에 의해 설정된 각도를 나타냅니다. 음수 값은 요소가 시계 반대 방향으로 회전한다는 의미입니다. 요소의 크기는 설정된 너비(X축)와 높이(Y축)를 늘리거나 줄입니다.

rotate(30deg)//顺时针旋转30度

skew()는 요소 뒤집기에 의해 설정된 각도를 나타내며 X축과 Y축을 설정합니다.

scale(3,4)//把宽度扩大为原来的2倍，把高度变为原来的4倍

matrix()

matrix() 메소드는 수학 함수, 회전, 스케일링, 이동 및 기울기를 포함하는 일반적인 2D 메소드입니다. 변환

translateX(x)는 X축 값에 적용 가능하고,translateY(y)는 Y축 값에 적용 가능하며,translateZ(z)는 Z축 값에 적용 가능

 skew(30deg,20deg)//沿X轴把元素翻转30度，沿Y轴翻转20度

scale3d(x,y, z): 3D 스케일링 변환.

scaleX(x)는 X축 값을 제공하고, scaleY(y)는 Y축 값을 제공하며, scaleZ(z)는 Z축 값을 제공합니다.

matrix(0.866,0.5,-0.5,0.866,0,0）

rotate3d(x,y,z,angle): 3D 회전.

rotateX(angle)는 X축을 따른 3D 회전이고,rotateY(angle)은 Y축을 따른 3D 회전이며,rotateZ(angle)는 Z축을 따른 3D 회전입니다.

例：
<style>
	/*在chrome浏览器下运行*/
div
{
width:200px;
height: 100px;
text-align: center;
line-height:100px;
background-color: pink;
-webkit-transform:translateX(150px);/*X轴移动150px*/
-webkit-transform:rotate(-50deg);/*按逆时针旋转50度*/
-webkit-transform:skew(20deg,20deg);/*沿X轴，Y轴旋转20度*/	
}
</style>

perspective(n) 3D 변환 요소의 투시도를 정의합니다.
근데 현재 브라우저는 이 효과를 지원하지 않습니다

rotateX(30deg)//沿X轴旋转30度

Rendering picture

요약: 위 내용은 이 글의 내용입니다. CSS3를 공부하시는 모든 분들께 도움이 되었으면 좋겠습니다.

위 내용은 CSS3에서 2D와 3D를 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!