html+css3实现长方体效果

最新推荐文章于 2021-06-07 13:16:43 发布

qq4165498

最新推荐文章于 2021-06-07 13:16:43 发布

阅读量3.1k

点赞数 1

网上大都是正方体的效果，由于做一个东西需要，写了一个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中可插入图片什么的会更好看些。

qq4165498

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html+css3实现长方体效果

网上大都是正方体的效果，由于做一个东西需要，写了一个HTML+css3实现的长方体，有需要的也可以看看。 2017-07-25 21:30:23html代码 1 DOCTYPE html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8"> 5 title
复制链接

扫一扫