這篇文章主要介紹如何解決CSS3旋轉(zhuǎn)立方體問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

站在用戶的角度思考問題，與客戶深入溝通，找到鳳臺網(wǎng)站設(shè)計與鳳臺網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鳳臺地區(qū)。

3D坐標概念

• 當(dāng)元素進行旋轉(zhuǎn)時，他的坐標軸也跟著他進行旋轉(zhuǎn)

• 注意-y方向問題

旋轉(zhuǎn)立方體的效果

分析

•  一個容器包含6個div

• position：absolute 之后6個面完全重合

• 通過trandform：rotateX/Y/Z()，translateX/Y/Z()調(diào)整到相應(yīng)位置

• 添加transition動畫效果

• 注意這里面的旋轉(zhuǎn)是繞著他的中心線進行旋轉(zhuǎn)的所以100px

• 他在旋轉(zhuǎn)時，他的坐標軸也是跟著他進行旋轉(zhuǎn)的(這很重要)

代碼

    
    
    
    
    


    
        1