html+css3實現長方體效果

來源:互聯網
上載者:User

標籤: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實現長方體效果

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.