Web移动端第二天

空间转换

空间转换和平面转换差不多一样就是多了个Z轴

1. 位移
2. 旋转
3. 缩放-3d缩放

位移

1. translateX
2. translateY
3. translateZ 默认情况下在浏览器看不到Z轴移动
4. translate3d(x,y,z)

旋转

旋转会影响当前元素的坐标系，当我们同时需要添加位移旋转效果时，强烈建议：先位移再旋转！！！

1. rotateX
2. rotateY
3. rotateZ
4. rotate3d(x,y,z,角度)

缩放-3d缩放

立体坐标系

X轴、Y轴、Z轴(方向是从屏幕里面指向屏幕外面)

补充知识点

1. 视距perspective 能看到Z轴的移动效果，要在所在元素的父元素添加

    <style>
   
           div {
               /* 给父级添加 */
                perspective: 800px;
           }
           img {
   
               transform: translate3d(200px,100px,100px);
           }
       </style>
   
       <div>
           <img src="./images/hero.jpeg" alt="">
       </div>
   

   2.左手准则

   根据左手来判断物体旋转方向方便我们判断代码如何执行或者根据效果图反推代码

   3.3d立方体

   我们可以认为我们设置的标签盒子就是一个平面图形

   如果想让他有3d立体的效果可以给他添加transform-style:preserve-3d;元素transform-style:flat默认属性值

   立体呈现开启3d空间transform-style:preserve-3d;

立体正方体案例思路

1 静态结构

1 定一个父盒子 box 包装着6个小 平面 （立方体 有6个面）

2 写6个面

1 先使用定位 来重叠在一起 （方便后面一个一个的调整他们的位置 构造立方体 ）

2 使用 空间变换来实现 立方体！！

1 前： z轴 正 移动 +100

2 后： z轴 负 移动 -100

3 提前检查一下 有效果

1 给box 开启立体空间效果-立体呈现 3d呈现

2 给box 旋转