02-3D转换及案例分享

一、CSS3-3D转换

1.3D

特点：近大远小，物体和面遮挡不可见

1.1三维坐标系

x 轴：水平向右 – x 轴右边是正值，左边是负值

y 轴：垂直向下 – y 轴下面是正值，上面是负值

z 轴：垂直屏幕 – 往外边的是正值，往里面的是负值

2.3D移动tranlate3d

2.1 语法

transform:translate3d(x,y,z);
transform:translateZ(z);

2.2用法

        .box3 {
   
            /* 向里面移动100 */
            transform: translateZ(-100px);
        }

        .box4 {
   
            /* 向右移动50，向下移动50，向外移动50 */
            /* translate3d */
            transform: translate3d(50px, 50px, 50px);
        }

        .box5 {
   
            /* 向里面移动100 */
            /* translate3d里面的值不能省略，没有就写0 */
            transform: translate3d(0, 0，-100px);
        }

2.3总结

1.translate3d里面的3d要小写。

2.translate3d后面的值一定是三个值(x,y,z)，不能省略，没有的就写0，且顺序不能颠倒。

3.3d的z值一般都是精准的像素值。

4.z值为正数就是往外面移动，为负数就是往里面移动

3.透视perspective

1.产生3d效果必须写透视。

2.透视就是视距，即人眼到屏幕的距离。

3.近大远小

4.透视prespective的单位是像素

5.透视写在被观察元素的父盒子上。

4.3D转换之移动—translatedZ

给父元素加perspective后，再给子元素添加translateZ会产生近大远小。

        body {
   
            /* 人眼距屏幕500px */
            perspective: 500px;
        }
        
        .box1 {
   
        /*变小*/
            transform: translateZ(-100px);
        }

        .box2 {
   
        /*变大*/
            transform: translateZ(100px)