css3之3D立方体

时间 2021-07-10 标签 transfromrotate 3D css3 3d

在做立方体前先介绍下3D转换的知识：

1、左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

2、CSS中的3D坐标系

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

a) 绕X轴旋转，rotateX

b) 绕Y轴旋转，rotateY

c) 绕Z轴旋转，rotateZ.html

d) 在X轴移动，translateX.html

d) 在Y轴移动，translateY.html

d) 在Z2轴移动，translateZ.html

3、左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。

4、透视（perspective）

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective有两种写法

a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素

b) 作为transform属性的一个值，做用于元素自身

5、理解透视距离

透视会产生“近大远小”的效果

源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>立方体</title>
    <style type="text/css">
        .box{
            width: 250px;
            height: 250px;
            border: 1px dashed red;
            margin:100px auto;
            position: relative;
            border-radius: 50%;

            /* 让子盒子保持3d效果*/   transform-style:preserve-3d;

            /*transform:rotateX(30deg) rotateY(-30deg);*/   animation:gun 8s linear infinite;
        }
       .box>div{
           width: 100%;
           height: 100%;
           position: absolute;
           text-align: center;
           line-height: 250px;
           font-size:60px;
           color:#daa520;
       }
        .left{
            background-color: rgba(255,0,0,0.3);
            /*变幻中心*/  transform-origin:left;
            /*变换角度*/  transform:rotateY(90deg)  translateX(-125px);
        }
        .right{
            background-color: rgba(255,0,0,0.3);
            /*变幻中心*/  transform-origin:left;
            /*变换角度*/  transform:rotateY(90deg)  translateX(-125px);
        }
        .forward{
            background-color: rgba(255,0,0,0.3);
            transform:translateZ(125px);
        }
        .back{
            background-color: rgba(255,0,0,0.3);
            transform:translateZ(-125px);
        }
        .up{
            background: rgba(255,0,255,0.3);
            transform:rotateX(90deg) translateZ(125px);
        }
        .down{
            background: rgba(255,0,255,0.3);
            transform:rotateX(-90deg) translateZ(125px);
        }
        @keyframes gun{
          0%{
             transform: rotateX(0deg) rotateY(0deg);
          }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="up"></div>
        <div class="down"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="forward"></div>
        <div class="back"></div>
    </div>
</body>
</html>