标签：pos blog v.net height 位置 infinite pre ack har
网上大都是正方体的效果，由于做一个东西需要，写了一个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中可插入图片什么的会更好看些。
标签：pos blog v.net height 位置 infinite pre ack har
原文地址：http://www.cnblogs.com/zihuatanejoyn/p/7236717.html
