bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS3中3D環境實現立體的魔方效果代碼分享-創新互聯

這篇文章主要介紹“CSS3中3D環境實現立體的魔方效果代碼分享”，在日常操作中，相信很多人在CSS3中3D環境實現立體的魔方效果代碼分享問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3中3D環境實現立體的魔方效果代碼分享”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都網站制作,成都營銷型網站-成都創新互聯公司科技公司專注營銷型網站建設及定制型網站開發。致力為您建設最有價值的網站,服務熱線:18980820575。

<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>魔方</title>

   <style type="text/css">

     section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective: 800px;}

     .box {width:100px;height:100px;position:relative;

       transform-style:preserve-3d;

       transition:4S;

       transform-origin:center center -50px;

     }

     .box div{width: 100px;height:100px;position:absolute;color:white;font-size:50px;text-align: center;line-height:100px;}

     .box div:nth-of-type(1){

       background: #FF6600;;

       transform:translateX(-100px) rotateY(-90deg);

       transform-origin:right;

     }

     .box div:nth-of-type(2){

       background:red ;

       transform:translateY(-100px) rotateX(90deg);

       transform-origin:bottom ;

         }

     .box div:nth-of-type(3){

       background:darkviolet;

       transform:translateX(100px) rotateY(90deg);

       transform-origin:left;

     }

     .box div:nth-of-type(4){

       background:yellow;

       transform: translateY(100px) rotateX(-90deg) ;

       transform-origin:top;

     }

     .box div:nth-of-type(5){

       background:green;

       transform:translateZ(-100px) rotateY(180deg);

     }

     .box div:nth-of-type(6){

       background:blue;

     }

     section:hover .box{

       transform: rotateX(270deg) rotateY(-270deg) rotateX(-270deg) rotateY(270deg) ;

     }

   </style>

 </head>

 <body>

  <section>

     <div class="box">

       <div>1</div>

       <div>2</div>

       <div>3</div>

       <div>4</div>

       <div>5</div>

       <div>6</div>

     </div>

   </section>

 </body>

 </html>

到此，關于“CSS3中3D環境實現立體的魔方效果代碼分享”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞名稱：CSS3中3D環境實現立體的魔方效果代碼分享-創新互聯
本文地址：http://vcdvsql.cn/article2/epsoc.html

成都網站建設公司_創新互聯，為您提供小程序開發、商城網站、搜索引擎優化、外貿網站建設、手機網站建設、定制開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都app開發公司