CSS笔记——3D

一、三维坐标系 和 透视

透视 perspective

• 网页产生3D效果需要透视
• 模拟人类的视觉位置，可认为安排一只眼睛去看
• 透视也称为视距：视距就是人的眼睛到屏幕的距离
• 越近成像越大，越远成像越小；即Z轴越大，成像越大
• 透视的单位是像素
• 透视写到3D元素的父盒子上

二、3D位移 translate3d(x,y,z)

2.1 语法

• translate3dX();  左右
• translate3dY(); 上下
• translate3dZ();   内外 Z轴上一般用精确单位（px）
• translate3d(x,y,z);  xyz不能省略 如果没有就写0

三、3D旋转rotate3d

3.1 语法

• transform:rotateX(ndeg); 沿着x轴旋转n度;正值：后仰；负值：前倾
• transform:rotateY(ndeg);
• transform:rotateZ(ndeg);
• transform:rotate(x,y,z,ndeg);沿着自定义轴旋转  (1,1,0)沿着对角线

3.2 旋转方向：左手准则

四、3D呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-style:flat 子元素不开启3d立体空间 默认的
• transform-style:preserve-3d;子元素开启立体空间
• 代码写给父级，影响的是盒子

五、应用

1. 移动写在旋转前面 transform: translateY(15px) rotateX(-90deg);

旋转木马

        body {
            perspective: 1200px;
        }
        .box {
            transform-style: preserve-3d;
            position: relative;
            margin: 200px auto;
            height: 200px;
            width: 300px;
            animation: dog1 5s infinite linear;
        }
        .box div {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: url('img/dog.jpg');
        }

        /* 现移动 再旋转 */
        .box div:nth-child(1) {
            transform: translateZ(300px);
        }
        .box div:nth-child(2) {
            transform: rotateY(-60deg) translateZ(300px);
        }
        .box div:nth-child(3) {
            transform: rotateY(-120deg) translateZ(300px);
        }
        .box div:nth-child(4) {
            transform: rotateY(-180deg) translateZ(300px);
        }
        .box div:nth-child(5) {
            transform: rotateY(-240deg) translateZ(300px);
        }
        .box div:nth-child(6) {
            transform: rotateY(-300deg) translateZ(300px);
        }
        @keyframes dog1 {
            0% {}
            100% {
                transform: rotateY(360deg);
            }
        }
        .box:hover {
            animation-play-state: paused;
        }

视频地址