网上大都是正方体的效果，由于做一个东西需要，写了一个HTML+css3实现的长方体，有需要的也可以看看。 2017-07-25 21:30:23
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html+css3实现长方体效果</title> 6 <link rel="stylesheet" href="css/cuboid.css" /> 7 </head> 8 <body> 9 <div class="square-box"> 10 <div class="front"></div> 11 <div class="bottom"></div> 12 <div class="back"></div> 13 <div class="top"></div> 14 <div class="left"></div> 15 <div class="right"></div> 16 </div> 17 </body> 18 </html>
css代码
1 .square-box{
2 width: 200px;
3 height: 100px;
4 box-sizing: border-box;
5 position: relative;
6 transform-style: preserve-3d;
7 /*设置动画 三者分别为：动画名 执行一次时间 执行方式*/
8 animation: rotateanimation 5s ease;
9 animation-iteration-count: infinite;/*令动画无限执行下去*/
10 animation-timing-function: linear;/*匀速*/
11 margin:200px auto;
12 }
13 .square-box>div{
14 position: absolute;
15 }
16 /*设置六面的视角*/
17 .square-box>.front{
18 width: 200px;
19 height: 100px;
20 transform: translateZ(50px);
21 background:red;
22 }
23 .square-box>.bottom{
24 width: 200px;
25 height: 100px;
26 transform: rotateX(270deg) translateZ(50px);
27 background:deeppink;
28 }
29 .square-box>.back{
30 width: 200px;
31 height: 100px;
32 transform: translateZ(-50px);
33 background:darkcyan;
34 }
35 .square-box>.top{
36 width: 200px;
37 height: 100px;
38 transform: rotateX(90deg) translateZ(50px);
39 background: yellow;
40 }
41 .square-box>.left{
42 width: 100px;
43 height: 100px;
44 transform: rotateY(270deg) translateZ(50px);
45 background: black;
46 }
47 .square-box>.right{
48 width: 100px;
49 height: 100px;
50 transform: rotateY(90deg) translateZ(150px);
51 background: #a7cbf0;
52 }
53 /*添加动画效果*/
54 @keyframes rotateanimation{
55 0%{
56 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
57 }
58 100%{
59 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
60 }
61 }
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
取值：
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
制作出长方体后你可以再加些自己想要的特效，div中可插入图片什么的会更好看些。
时间： 2024-12-25 14:04:16