空间转换

空间：

​ 1.是从坐标轴角度定义，有x，y，和z三条坐标轴构成的立体空间，z轴正方向是指向自身方向

​ 2.空间转换也叫做3D转换

​ 3.属性值：transform

语法：

​ transform:translateX(值);

​ transform:translateY(值);

​ transform:translateZ(值);

​ transform:translate3d(X,Y,Z);

可取单位：像素，百分比

注意点:

​ 默认情况下Z轴变化是看不出的，因为Z轴是视觉方向，移动应该是远小近大。不过电脑屏幕是一个平面,所以看不出Z轴效果。

​ 使用perspective(视距)属性实现透视效果。视距就是人的眼睛到被观察物体的距离。注意添加给父级！

<style>
        body {
            /*2. 添加视距 ，给父元素添加,一般写1000px*/
            perspective: 1000px;
        }

        div {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;

            /*1. 默认情况下看不到Z轴的变化 */
            /*3. 当数值超出视距，相当于跑到你后面去了 */
            transform: translateZ(-100px);
            
            transform: translate3d(100px, 100px ,200px);
            
        }
    </style>

空间旋转

目标

​ 使用rotate实现空间旋转效果

语法

​ transform:rotateZ(值)；沿着Z轴旋转

​ transform:rotateX(值)；沿着X轴旋转

​ transform:rotateY(值)；沿着Y轴旋转

​ 想要效果有近大远小要加视距

左手法则

​ 左手握住旋转轴，拇指指向正值，手指弯曲方向为旋转的正值方向

立体呈现

​ 用transform-style：preserve-3d呈现立体图形

​ 此代码是开启立体空间的意思

​ flat是默认值也就是默认平面的

​ 谁想开启立体空间就给父元素

小拓展

​ 在现实环境中，空间中的物体旋转的时候不一定沿着X,Y,Z做旋转

​ 可以沿着任意的方向旋转

​ 矢量：两个点，可以确定方向和长度

​ trf:t(x坐标,y坐标,z坐标,角度)