CSS

CSS-3D

学习CSS3D

Posted by wang chong on May 16, 2019

3D

在CSS3D的世界中可以说有三个东西是核心:透视、3D变形函数、3D加速。这三者构成了CSS的3D体系,也样CSS可以那么容易的构成3D空间。

透视

人的眼睛看事物总是有一个规律:近大远小。这个东西也可以叫做景深,有了景深,才能让我们看的东西变成3D。

开启透视

-webkit-transform-style: preserve-3d;
-webkit-perspective: 300  300是透视的距离,每一个元素都有一个消失点。
-webkit-perspective-origin25% 75% 视角的视点(视角的范围)

注意点

  1. 开启3D需要给元素加一个属性,这个属性只针对该元素的子元素,不对自己产生效果。
  2. 眼睛里当前显示器的距离就叫做透视的距离。

3D变形函数

3D变形使用的是和2D变形类似的transform属性:

  1. rotateX绕X轴旋转,rotateY绕Y轴旋转,rotateZ绕Z轴旋转。
  2. translateX在X轴上平移,translateY在Y轴上平移,translateZ在Z轴上平移。
  3. scaleX在X轴上缩放,scaleY在Y轴缩放,scaleZ在Z轴缩放。
  4. matrix3d()函数则牵扯到线性代数、立体几何、三角学等的各种知识。

3D加速

开启GPU加速

translate3d(0,0,0);

使用3D画一个正方体

@size: 200px;
.wrapper div{
    width: @size;
    height: @size;
    background-color: rgba(144,240,145,0.5);
    font-size: 100px;
    line-height: @size;
    text-align:center;
    position: absolute;
    border:4px solid black;
    box-sizing: border-box;
    backface-visibility:hidden;   //背面不可见
}
.wrapper {
    position: absolute;
    left:300px;
    top:300px;
    background-color:transparent;
    transform-style: preserve-3d;
    perspective: 20000;
    perspective-origin: 50% 50%;
    // animation-name: move;    //动画名称
    // animation-timing-function: ease-in-out; //以什么样的运动函数运动
    // animation-iteration-count: infinite;       //循环运动
    // animation-duration: 3s;         //运动时间
    animation: move ease-in-out infinite 3s;
    transform-origin: 80px 80px 0;
    backface-visibility:hidden;
}
.A{
    transform: translateZ(100px);
}
.B{
    transform: rotateX(90deg) translateZ(100px) ;
}
.C{
    transform: rotateX(-90deg) translateZ(100px); 
}
.D{
    transform: rotateY(-90deg) translateZ(100px); 

}
.E{
    transform: rotateY(90deg) translateZ(100px); 
}
.F{
    transform: rotateY(-180deg) translateZ(100px); 
}
@keyframes move {
    16%{
        transform: rotateY(-90deg);
    }
    33%{
        transform : rotateY(-90deg) rotateZ(135deg);
    }
    50%{
        transform : rotateY(225deg) rotateZ(135deg);
    }
    66%{
        transform : rotateY(135deg) rotateX(135deg);
    }
    83%{
        transform : rotateX(135deg);
    }
}