CSS3 3D转换

• 2020 年 8 月 16 日
• 笔记
• 前端开发

CSS3中的3D转换与2D转换类似，只是在2D的x轴与y轴的基础上增加了z轴，同时增加了透视等属性。

在页面中，坐标系如下图所示

透视perspective

在2D平面上产生近大远小的视觉立体，但是其效果只是二维的。若想产生3D效果（3D投影到2D平面上）则需要利用透视属性，透视的单位是px，透视其实就是视距，及人眼到屏幕的距离，也就是下图中的d

对于同样的z，d越小成象越小。透视要加在被观察元素的父元素上。

translateZ()

translateZ会改变盒子的z轴，z越大，则离人眼越近，成象越大。

div[class^=box]{
            float:left;
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:50px;
        }
        .box2{
            transform:translateZ(50px);
        }
        .box3{
            transform:translateZ(-50px);
        }

沿x轴旋转rotateX()

div[class^=box]{
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:0 auto;
        }
        .box2{
            transform:rotateX(45deg);
        }
        .box3{
            transform:rotateX(-45deg);
        }

实现效果:

沿y轴旋转rotateY()

div[class^=box]{
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:0 auto;
        }
        .box2{
            transform:rotateY(45deg);
        }
        .box3{
            transform:rotateY(-45deg);
        }

实现效果:

沿z轴旋转rotateZ()

div[class^=box]{
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:0 auto;
        }
        .box2{
            transform:rotateZ(45deg);
        }
        .box3{
            transform:rotateZ(-45deg);
        }

实现效果:

可以看出在2D平面上的rotate就是绕着z轴旋转

沿着指定矢量方向旋转rotate3d()

rotate3d共有4个参数，前3个参数是x，y，z的矢量，第4个参数是旋转的角度

div[class^=box]{
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:0 auto;
        }
        .box2{
            transform:rotateZ(45deg);
        }
        .box3{
            transform:rotateZ(-45deg);
        }

实现效果:

transform-style 属性

若一个父盒子的子盒子已经定义了3D转换，此时如果要对父盒子进行3D转换，则需要对父盒子设定transform-style，才能使被转换的子元素保留其3D转换。

transform-style的默认值为flat(子元素将不保留其 3D 位置)，可以将父盒子的transform-style改为preserve-3d,即可保证子元素也保留3D转换

.fa-box {
            position: relative;        
            margin: 100px auto;
            width: 200px;
            height: 200px;
            transform:rotateY(45deg);
            transform-style:preserve-3d;//保留子元素3D转换
        }

        div[class^=box] {
            position:absolute;
            left:0;
            top:0;
            width: 100%;
            height: 100%;
            border: black 5px solid;
           
        }
        .box1{
            background-color:red;
            transform:rotateX(45deg);
            z-index: 1;
        }
        .box2{
            background-color: blue;
        }

.fa-box {
           /*........*/
            transform-style:flat;//不保留子元素3D转换
           /*........*/
        }