標籤: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中可插入圖片什麼的會更好看些。
html+css3實現長方體效果