css 2d3d转换有什么用

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.webp"></div>
        <div class="div y"><img src="snow.webp"></div>
        <div class="div z"><img src="snow.webp"></div>
    </div>
</body>
</html>

效果：