1、2D转换方法：对元素进行旋转、缩放、移动、拉伸
部分transform属性：
rotate(度数deg)——度数为正值，顺时针旋转；度数为负值，逆时针旋转
scale(x,y)——x为水平方向缩放倍数，y为垂直方向缩放倍数，若省略，同x；0~1缩小，>1放大
.y img:hover{
transform: scale(1.2);
}
.x img:hover{
transform: rotate(10deg);
} 效果：
作用：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
（相关课程推荐：css视频教程）
2、3D变换
transform-style：preserve-3d——设置为3D变换
transform属性（旋转）——rotateX() ，rotateY() ，rotateZ()分别沿着X，Y，Z旋转，单位为deg（度数）
prepective属性——设置透视效果，近大远小，3D转换必须要设置此属性
3D变换通常将内容包裹在一个父容器中，而父容器在舞台中
父容器设置旋转，设置transform-style属性和tranform：rotate属性
舞台设置透视关系，perspective：100px；即眼睛到舞台的距离为100像素，值越大，看得越不明显
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.stage{
height: 120px;
margin: 100px auto;
perspective: 100px;
}
.div{
height: 80px;
width: 120px;
border: 1px solid red;
float: left;
transform-style: preserve-3d;
}
img{
height: 80px;
width: 120px;
}
.x:hover{
transform: rotateX(30deg);
}
.y:hover{
transform: rotateY(30deg);
}
.z:hover{
transform: rotateZ(30deg);
}
</style>
</head>
<body>
<div class="stage">
<div class="div x"><img src="snow.jpg-600"></div>
<div class="div y"><img src="snow.jpg-600"></div>
<div class="div z"><img src="snow.jpg-600"></div>
</div>
</body>
</html>效果：
作用：css3d转换可以让元素沿着x，y，z轴进行旋转。
本文来自css3答疑栏目，欢迎学习！
以上就是css 2d3d转换有什么用的详细内容，更多请关注0133技术站其它相关文章！
