主要记录两个css3 3D转换的示例
㈠哆啦A梦
三个哆啦A梦的图片，分别让其围绕X轴，Y轴，Z轴旋转60度，鼠标放上开始发生变化。
具体代码如下图所示：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>3d变换</title>
6 <style type="text/css">
7 #stage{
8 width: 910px;
9 margin:100px auto;
10 perspective:100px;
11 }
12 .box{
13 width:300px;
14 height: 327px;
15 float: left;
16 transition:linear 1s;
17 transition-style:preserve-d;
18 }
19 img{
20 width:300px;
21 height: 327px;
22 }
23 .x:hover{
24 transform:rotateX(60deg);
25 }
26 .y:hover{
27 transform:rotateY(60deg);
28 }
29 .z:hover{
30 transform:rotateZ(60deg);
31 }
32 </style>
33 </head>
34 <body>
35 <div id="stage">
36 <div class="box x">
37 <img src="图片/A.jpg"/>
38 </div>
39 <div class="box y">
40 <img src="图片/A.jpg"/>
41 </div>
42 <div>
43 <div class="box z">
44 <img src="图片/A.jpg"/>
45 </div>
46 </div>
47 </body>
48 </html>
效果如下所示：
⑴鼠标放在第一个图片效果如下：
⑵鼠标放在第二个图片效果如下：
⑶鼠标放在第三个图片效果如下：
㈡纯HTML+CSS制作的旋转的立方体
一个名为“坚持就是胜利”的旋转立方体，代码如下;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>旋转立方体</title>
8 <style>
9 *{
10 margin:0;
11 padding:0;
12 }
13 body{
14 background: #222;
15 }
16 div.wrap{
17 width:200px;
18 perspective: 1000px;
19 position: absolute;
20 top:50%;
21 left:50%;
22 transform:translateX(-50%) translateY(-50%);
23 }
24 .cube{
25 width:200px;
26 height: 200px;
27 position: relative;
28 transform-style:preserve-3d;
29 transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);
30 animation: move 20s infinite linear;
31 }
32 .cube>div{
33 width:100%;
34 height:100%;
35 background:black;
36 position: absolute;
37 box-shadow:0 0 10px currentColor;
38 font-size: 50px;
39 text-align: center;
40 line-height: 200px;
41 }
42 .cube:hover>div{
43 background: currentColor;
44 box-shadow: 0 0 30px currentColor;
45 }
46 .cube .out-front{
47 transform: translateZ(100px);
48 color:deeppink;
49 }
50 .cube .out-back{
51 transform: translateZ(-100px) rotateY(-180deg);
52 color:seagreen;
53 }
54 .cube .out-left{
55 transform: translateX(-100px) rotateY(-90deg);
56 color:skyblue;
57 }
58 .cube .out-right{
59 transform: translateX(100px) rotateY(90deg);
60 color:lightcoral;
61 }
62 .cube .out-top{
63 transform: translateY(-100px) rotateX(90deg);
64 color:lightslategrey;
65
66 }
67 .cube .out-bottom{
68 transform: translateY(100px) rotateX(-90deg);
69 color:gold;
70
71 }
72 @keyframes move{
73 0%{
74 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
75 }
76 100%{
77 transform: rotateX(360deg) rotateY(720deg) rotateZ(720deg);
78 }
79 /*from 和 to 也可以*/
80 }
81
82 </style>
83 </head>
84 <body>
85 <div class="wrap">
86 <div class="cube">
87 <div class="out-front">就</div>
88 <div class="out-back">坚</div>
89 <div class="out-left">持</div>
90 <div class="out-right">胜</div>
91 <div class="out-top">利</div>
92 <div class="out-bottom">是</div>
93 </div>
94 </div>
95
96 </body>
97 </html>
部分效果图如下：
★ 以上代码的部分解释：
X-UA-Compatible：X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。
IE=edge告诉IE使用最新的引擎渲染网页。
通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。
currentColor：当前的文字颜色。具体内容可以参考以下链接：
https://www.bbsmax.com/A/RnJWrgYzqY/
有关魔方的知识可以参考以下这个链接：
https://www.cnblogs.com/susouth/p/9992923.html
希望有所帮助！