Day 26 CSS3 < 3D转换 transform>

3D转换跟2D转换不同的是使用三维坐标系(多了Z轴座标)

1.三维坐标系是由三个轴共同组成的

• X轴 : 水平向右 注意: X轴右边是正值 左边是负值
• Y轴 : 垂直向下 注意: Y轴下面是正值 上面是负值
• Z轴 : 垂直屏幕 注意: 往外面是正值 往里面是负值

2.3D 移动 translate3d

3D移动是在2D移动的基础上多加了Z轴方向

• transform:translateX(100px) : 仅仅在x轴上移动
• transform:translateY(100px) : 仅仅在y轴上移动
• transform:translateZ(100px) : 仅仅在z轴上移动

(注意 : translateZ一般用px单位)

• transform:translate3d(x,y,z):xyz代表要移动的轴方向距离)

CSS:
 body {
            /* 透视写在被观察元素的父盒子上 */
            perspective: 200px;

        }

        div {
            transition: all 3s;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform:translateX(100px);
            transform:translateY(100px); */
            /* transform: translateX(100px) translateY(100px)   translateZ(100px); */
            /* transform: translate3d(400px, 100px, 100px); */
            /* xyz是不能省略的 如果没有需要写0 */
        }

            div:hover {
            transform: translate3d(400px, 100px, 100px);
            }
        
HTML:
<div></div>

translated3d

3.透视 perspective

在2D平面产生进大远小视觉立体，但是只是效果二维的

• 如果想要在网页产生3D效果需要透视

(理解成3D物体投影在2D平面内)

• 模拟人类的视觉位置，可认为安排一只眼睛去看
• 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
• 距离视觉点跃进的在平面成像越大，月远成像越小
• 透视的单位是像素

MDN perspective

(透视写在被观察元素的父盒子上)

4.3D旋转 rotate3d

3D旋转可以让元素沿着x,y,z轴或者自定义轴进行旋转

语法:

• transform:rotateX(45deg) :沿着x轴方向旋转45度
• transform:rotateY(45deg) :沿着Y轴方向旋转45度
• transform:rotateZ(45deg) :沿着Z轴方向旋转45度
• transform:rotate3d(x,y,z,deg) :沿着自定义轴方向旋转 deg为角度

对於元素旋转的方向判断可以使用左手准则

CSS:
  <style>
        body {
            perspective: 300px;
        }

        div {
            width:300px;
height:300px;
background-color: blanchedalmond;
            display: block;
            margin: 100px auto;
            transition: all 2s;
        }

        div:hover {
            /* transform: rotateZ(360deg); */
            /* transform: rotate3d(x,y,z,deg); */
            transform: rotate3d(1, 1, 1, 360deg);
        }
    </style>
HTML:
<div>滑鼠放上去将会旋转</div>

rotate3d

5.3D呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-style:flat 子元素不开启3d立体空间 (默认
• transform-style:preserve-3d;子元素开始立体空间
• 代码写给父级，但是影响的是子盒子
• 这个属性很重要 後面必用

CSS:
 body {
        perspective: 500px;
    }

    .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 2s;
        /* 让子元素保持3d立体空间 */
        transform-style: preserve-3d;
    }

    .box:hover {
        transform: rotateY(180deg);
    }

    .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: pink;
    }

    .box div:last-child {
        background-color: purple;
        transform: rotateX(60deg);
    }
 
 HTML:
     <div class="box">
        <div></div>
        <div></div>
    </div>

transform-style