CSS--3D正方体旋转

前言：正方体旋转这个效果是之前在逛其他博客的时候看到的，然后觉得好玩，就做出来看看。

代码：

  1 <!DOCTYPE html>
  2 <head> 
  3     <meta charset="utf-8" /> 
  4     <title>正方体旋转</title>
  5     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 </head>
  7 <style>
  8     body{
  9         margin: 0 0;
 10         padding:0 0;
 11     }
 12     #cube img{
 13         width: 100%;
 14         display: block;
 15     }
 16     #cube{
 17         transform-style: preserve-3d;/*构建3D立体图形必须设置preserve-3d*/
 18         /* perspective: 1000px;  */
 19         /*Z轴视角*/
 20         /* perspective-origin: 400px 0px; */
 21         /*可设置X\Y方向的视角，Z方向由perspective()决定。*/
 22         width: 200px;
 23         height: 200px;
 24         margin: 150px auto;
 25         animation: rotate3D 10s infinite;
 26         animation-delay: 0s;
 27         animation-timing-function: linear;
 28     }
 29 @keyframes rotate3D{
 30     from{
 31         transform: rotateX(0deg) rotateY(0deg);
 32     }
 33     to{
 34         transform: rotateX(360deg) rotateY(360deg);
 35         }
 36 }
 37     #cube div{
 38         /* transform-origin:left top; */
 39         opacity:0.7;
 40         position: absolute;
 41         transition: all  .4s;
 42     }
 43     .out_back{
 44         transform: translateZ(-100px);
 45     }
 46     .out_left{
 47         transform: rotateY(90deg) translateZ(100px);
 48     }
 49     .out_right{
 50         transform: rotateY(-90deg) translateZ(100px);
 51     }
 52     .out_bottom{
 53         transform:rotateX(-90deg) translateZ(100px);
 54     }
 55     .out_top{
 56         transform: rotateX(90deg) translateZ(100px);
 57     }
 58     .out_front{
 59         transform: translateZ(100px);
 60     }
 61 
 62     #cube span {
 63         transition: all  .4s;
 64         opacity:0.7;
 65         position: absolute;
 66         width: 100px;
 67         height: 100px;
 68         top: 50px;
 69         left: 50px;
 70     }
 71     .in_left {
 72     transform: rotateY(90deg) translateZ(50px);
 73     }
 74     .in_right {
 75     transform: rotateY(-90deg) translateZ(50px);
 76     }
 77     .in_bottom{
 78         transform:rotateX(-90deg) translateZ(50px);
 79     }
 80     .in_top{
 81         transform: rotateX(90deg) translateZ(50px);
 82     }
 83     .in_front{
 84         transform: translateZ(50px);
 85     }
 86     .in_back {
 87     transform: translateZ(-50px);
 88 }
 89 
 90     #cube:hover .out_front {
 91         transform: translateZ(200px);
 92     }
 93     #cube:hover .out_back {
 94         transform: translateZ(-200px);
 95     }
 96     #cube:hover .out_left {
 97         transform: rotateY(90deg) translateZ(200px);
 98     }
 99     #cube:hover .out_right {
100         transform: rotateY(-90deg) translateZ(200px);
101     }
102     #cube:hover .out_top {
103         transform: rotateX(90deg) translateZ(200px);
104     }
105     #cube:hover .out_bottom {
106         transform: rotateX(-90deg) translateZ(200px);
107     }
108     #cube:hover .in_front {
109         transform: translateZ(100px);
110     }
111     #cube:hover .in_back {
112         transform: translateZ(-100px);
113     }
114     #cube:hover .in_left {
115         transform: rotateY(90deg) translateZ(100px);
116     }
117     #cube:hover .in_right {
118         transform: rotateY(-90deg) translateZ(100px);
119     }
120     #cube:hover .in_top {
121         transform: rotateX(90deg) translateZ(100px);
122     }
123     #cube:hover .in_bottom {
124         transform: rotateX(-90deg) translateZ(100px);
125     }
126 </style>
127 
128 
129 
130 <body>
131     <div id="cube">
132         <div class="out_front">
133             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
134         </div>
135         <div class="out_back">
136             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
137         </div>
138         <div class="out_left">
139             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
140         </div>
141         <div class="out_right">
142             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
143         </div>
144         <div class="out_top">
145             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
146         </div>
147         <div class="out_bottom">
148             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="out_pic">
149         </div>
150         <span class="in_front">
151             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
152         </span>
153         <span class="in_back">
154             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
155         </span>
156         <span class="in_left">
157             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
158         </span>
159         <span class="in_right">
160             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
161         </span>
162         <span class="in_top">
163             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
164         </span>
165         <span class="in_bottom">
166             <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200723062933diShiNi-1.jpg" class="in_pic">
167         </span>
168     </div>
169 </body>
170 </html>

HTML

知识点：

要构建正方体，一定要了解3D坐标体系、3D变形的原理，元素是怎么翻转的，哪边是正向哪边是负向，Z轴是怎么位移的等等。下面只能概述，具体的过程还是要自己想一想，不然很难了解透的。有了正方体，用animation实现旋转方式就好了。也可以用hover改变位移实现鼠标飘上去的动作效果，这里就比较容易了。

解析：

一　　给出html，可以给六个面设置不同的背景色，这样比较突出,设置div大小：200px

1  <div id="cube">
2         <div class="out_front"></div>
3         <div class="out_back"></div>
4         <div class="out_left"></div>
5         <div class="out_right"></div>
6         <div class="out_top"> </div>
7         <div class="out_bottom"></div>
8  </div>

#cube,#cube div{
    width:200px;
    height:200px;
}
.out_back{background-color:#FF0000;}
.out_left{background-color:#FF7D00; }
.out_right{background-color:#FFFF00;}
.out_bottom{background-color:#00FF00;}
.out_top{ background-color:#0000FF;}
.out_front{background-color:#00FFFF;}

二　　构建3D立体图形，设置观看点，透视

1) 首先需要设置，构建3D立体图形构建3D立体图形，默认参数是flat，表2D

transform-style: preserve-3d;

2) 设置perspective，是Z轴位置的显示距离，也就是视距。视距越大，立体效果越不明显。如果不设置perspective，Z轴上的点都会对应在X,Y轴上，所以从屏幕上就看不到透视效果，只会显示为2D。

如：perspective:1000px ->就像是你对应屏幕内容的距离，近大远小

3) perspective，是Z轴的视距，而perspective-origin，则代表XY轴观看点，不同的位置能够看到不一样的立体图形，X代表X轴方向的位置，Y代表Y轴方向的位置

如：perspective-origin: 600px 0px; ->就表示在x轴600px的位置观看图形。

上述的作用就是为了在屏幕上显示出3D效果，且都要设置在父div上，获得透视效果的是子元素，而不是元素本身，如上就都要写在div#cube里面。

①就代表了子元素可以构建3D立体（配置环境）

②就代表给元素3D坐标Z轴添加视距（允许透视，有3D效果）

③就是给元素更改观看点（更清晰的看到立体图形）

perspective是必须写的，没有的话，页面就没有3D效果，但是perspective参数得到的是你从正面看到的一个立体的透视图形，就像我们从正面看魔方是一样的，立体效果并不明显，

就像这样perspective给元素添加了透视，显示的就不再是一个正方形。

而通过改变观看点，就能看到一个比较清晰的正方体。如下

x轴设置了600px的观看点，两侧的效果就会更直白了。

上面描述的是已有正方体而得到的结果，主要是为了解释perspective的意义。实际上我们写到这里页面是没有任何效果的，这样只是为了在后面，我们搭建左侧面，右侧面等能看的比较清楚。因为就算不设置perspective，通过变形位移得到的正方形还是存在的，只是但从正面你是看不到的，这样只是为了保证变形的结果是正确的。

同样，最后我们还是要让元素旋转的，前面是保证得到的元素是正确的，之后就可以把perspective-origin，和perspective样式注释掉了，因为通过旋转，就能看到了正方体的各个面。

如果还保持着不同的观看点，那么得到的旋转图形就不是正方形了，不同角度看到的物体是不一样形状，同样看到的旋转图形也是。我们想要的是正方体旋转。

那如果不需要旋转动画，透视效果自然还是要有的，不然看到的就是一个正方形。

三　　构建正方体，了解元素基点

前面3D环境已经构建好了

这里以左侧面为例：

父元素相对定位，子元素绝对定位

 .out_left{
     transform: rotateY(-90deg) translateZ(100px);
 }

X轴旋转-90°，即从右向左旋转到九十度垂直

然后设置Z轴向左位移100px，translateZ(100px)。

从旋转90则可以看到，旋转的中心轴，是以自身中间对称轴为准的，所以旋转过来是一半在前边一半在后面

这样有两个办法

①可以把back面向后位移100px

.out_back{
    transform: translateZ(-100px);
}

这样左侧面就完成了,或者不改变后面，左侧面再向X轴位移：translateX(100px)。都可以得到正方体的左侧面，这就是开头说的需要了解3D位移变形的原理，实现方法是多样的。

②了解transform-origin属性，前面perspective-origin是指观看点,而transform-origin就是元素基点，它默认是以自身所在的中心位置为原点的。

所以刚才旋转90°得到的图形是一半前一半后，第二种方法就是改变元素基点。

transform-origin默认值是center center，改为如下

transform-origin:left top;

这样正方体就会以左边线为轴心旋转90°，得到左侧面。

其他各个侧面：

.out_right{
        transform: rotateY(90deg) translateZ(100px);
}
.out_bottom{
        transform:rotateX(-90deg) translateZ(100px);
}
.out_top{
        transform: rotateX(90deg) translateZ(100px);
}
.out_front{
        transform: translateZ(100px);
}

这样一个正方体显示出来了，例子中是在里面又嵌套了一个小正方体，只要原理明白，宽度，高度设为大正方体的一半，3D位移时也要减一半就得到小正方体。

四　　animation动画，实现正方体旋转

#cube{ 
         animation: rotate3D 10s infinite;    /*动画名称  持续时间  无限次循环*/
         animation-delay: 0s;    /*延迟时间*/
         animation-timing-function: linear;  /*匀速播放*/
} 
@keyframes rotate3D{
    from{   /*X,Y轴旋转360°*/
        transform: rotateX(0deg) rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
        }
}

如果正方体不是按自身旋转360°，那说明轴心不是正方体的中心位置，可以在父元素中设置：

transform-origin:center conter 100px；第三值是Z轴位置，设为正方体边长的一半（改变元素基点）

或者通过正方体整体位移，也能达到改变元素基点的效果（元素基点没有改变，只是通过位移后元素基点变成了体心）。

总结：

1.transform-style构建3D立体，perspective视距，perspective-origin观看点

2.掌握transform变形，包括 rotate旋转和 translate位移。

3.使用animation，@keyframes关键帧

posted @ 2020-07-24 10:50 以深阅读(1209) 评论(0) 编辑收藏举报

刷新页面返回顶部

以深

有什么话想说吗？不要懒惰。

CSS--3D正方体旋转

公告