CSS3三維變形實現立體方塊

最後更新：2018-06-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這篇文章主要給大家介紹了CSS3利用三維變形實現立體方塊的方法，文中給出了完整的執行個體代碼，感興趣的朋友們可以自己運行後看看效果，只有自己動手了才能更好的學習，下面來一起看看吧。

前言

三維變換使用基於二維變換的相同屬性，如果您熟悉二維變換，你們發現3D變形的功能和2D變換的功能類似。3D變形與2D變形的最大不同就在於其參考的座標軸不同，2D變形的座標軸是平面的，只存在X軸和Y軸，而3D變形的座標軸則是X、Y、Z三條軸組成的立體空間，X軸正向是朝右，Y周正向是朝下，Z軸正向是朝螢幕外。

靜態如下：

執行個體代碼

<!DOCTYPE HTML><html>    <head>        <meta charset="utf-8">        <meta name="apple-mobile-web-app-capable" content="yes" />        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />        <title>CSS3三維變形</title>        <!--  -->        <style type="text/css">         * {          margin: 0;          padding: 0;         }                  .box {          position:relative;          top: 100px;          width:300px;          height: 300px;          margin: 0 auto;          background-color: #ccc;          /*           透視效果           越大透視距離越平面，反之亦然          */          perspective:800px;         }         .content {          /*3d視圖*/          transform-style: preserve-3d;          /*過度動畫*/          transition: all 3s linear;          width:200px;          height: 200px;          position: absolute;          top: 50px;       left: 50px;         }         /*          經過順時針旋轉         */         .content:hover {          transform: rotateX(180deg) rotateY(180deg);         }         /*          方塊公用樣式         */         .side {          position: absolute;       height: 200px;       width: 200px;       border: 2px solid #000;       background: rgba(0,0,0,0.3);       color: #fff;       line-height: 200px;       font-size: 30px;       font-weight: bold;       text-align: center;       text-shadow: 0 -1px 0 rgba(0,0,0,0.2);         }         /*          前         */         .side1 {           transform: translateZ(100px);         }         /*          後         */         .side2 {          transform: rotateX(180deg) translateZ(100px);         }          /*          左         */         .side3 {          transform: rotateY(-90deg) translateZ(100px);         }         /*          右         */         .side4 {          transform: rotateY(90deg) translateZ(100px);         }         /*          上         */         .side5 {          transform: rotateX(90deg) translateZ(100px);         }         /*          下         */         .side6 {          transform: rotateX(-90deg) translateZ(100px);         }        </style>    </head>    <body>     <!-- begin -->     <p class="box">      <p class="content">       <p class="side side1">1</p>             <p class="side side2">2</p>             <p class="side side3">3</p>             <p class="side side4">4</p>             <p class="side side5">5</p>             <p class="side side6">6</p>      </p>     </p>     <!-- end -->    </body></html>

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More