css3 3D物體旋轉

時間 2019-11-08

標籤 css3 css 3d 物體旋轉欄目 CSS 简体版

原文原文鏈接

最近一直在研究一些前端相關的3D技術，想要寫一個能夠自動旋轉的東西，想了好多方法，可能由於半路子出家，基礎並非很好，因此弄的很辛苦，如今和你們分享一下研究過程當中坎坷。css

css3中的3D變換，最早從這裏入門：好吧，CSS3 3D transform變換，不過如此！，這個做者很對本人的胃口，寫的很詳盡，也簡單易懂，更是詼諧幽默，很值得推薦。html

可是這些並不夠知足個人要求，由於想要作自動旋轉整個3D舞臺，因此最早想到是用時間計時器setInerval來計時，每一個間隔用jquery中css函數來改變rotate中的值，貼個代碼前端

$('.box').css('-webkit-transform',"rotateY(" + angle + "px)");

就像上面這個代碼，angle隨着時間變化，可是發現這個並不會旋轉，沒有卵用，好吧，只能放棄了，做爲一個小白，我以爲邏輯上是頗有道理的，可是無奈，沒辦法。時隔幾天後發現這種方法仍是能用的，語句是這樣的jquery

$('.box').css({'-webkit-transform':'rotateY(' + angle + 'px)'});

接下來嘗試第二種方法，這個帖子和這個帖子好像都分析的頗有道理呀，感受看到了但願的曙光，好的嘗試一下。立刻codingcss3

$(".box").animate({
                        '-webkit-transform': 'rotateY(' + angle + 'deg)',
                        '-moz-transform': 'rotateY(' + angle + 'deg)',
                        '-ms-transform': 'rotateY(' + angle + 'deg)',
                        '-o-transform': 'rotateY(' + angle + 'deg)',
                        'transform': 'rotateY(' + angle + 'deg)',
                        'zoom': 1
                        }, 100);
//或者是這樣

$(".box").animate({ whyNotToUseANonExistingProperty: 100 },{
                            step:function(now,fx) {
                                $('.box').css('-webkit-transform',"rotateY(" + angle + "px)");             
                            },
                            duration:'slow'
                        },'linear');

願望老是美好的，事實老是殘酷的，這樣的做用並非很大，又沒有卵用，爲何會這樣子呢，按道理來講是能夠的啊，哪位大哥知道的請分析下，先謝謝了。已經接近崩潰邊緣，思路徹底沒有問題啊，難道是我人品問題，最後在度娘一下吧，娘比哥有時候更有用，是吧。web

百度搜索，「css3 自動旋轉」，嗯，等等，好像看到了什麼不同的blog，點這裏，好像是一篇基礎知識，不過裏面還有例子，點我看例子，死馬當活馬醫，看看吧。canvas

恩，有點不對勁，他的物體在自動轉，什麼，沒有用到js，是我眼瞎仍是css3太強大？？wordpress

糾纏我這麼久的問題兩行解決了。函數

哭暈在廁所。。。。。。。。。。。動畫

好吧，附上我寫的一個小效果。自動旋轉的立方體，額好吧，不算是立方體，將就吧。

動態圖不會製做，原諒我，複製去流浪器看吧。

給個效果圖

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>「CSS3 」動畫詳解</title>
    <style>
        .canvas{
            width: 400px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid #000;
          
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            -o-perspective: 1000px;
            perspective: 1000px;
            -webkit-perspective-origin: 0 0;
            -moz-perspective-origin: 0 0;
            -ms-perspective-origin: 0 0;
            -o-perspective-origin: 0 0;
            perspective-origin: 0 0;
           
        }
        .box{
            width: 150px;
            height: 150px;
            position: relative;
            top: 50%;
            margin-top: -75px;
            margin-right: auto;
            margin-left: auto;
            border: 1px solid #000;

            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;

            -webkit-animation:scroll 10s linear 0s infinite;

        }

        @-webkit-keyframes scroll {

            0% {
                -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);

            }

          /*   50% {
                -webkit-transform:rotateY(360deg) rotateX(0deg) ;
            } */

            100% {
                -webkit-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }

        }


        .box > *{
            width: 150px;
            height: 150px;
            margin: 0 auto;
            text-align: center;
            line-height: 150px;
            font-size: 80px;
            position: absolute;
            opacity: 0.5;
            border: 1px solid red;
        }
        .box .front{
            -webkit-transform: translateZ(100px) rotateX(0deg);
            -moz-transform: translateZ(100px) rotateX(0deg);
            -ms-transform: translateZ(100px) rotateX(0deg);
            -o-transform: translateZ(100px) rotateX(0deg);
            transform: translateZ(100px) rotateX(0deg);
            background: red;
        }
        .box .back{
            -webkit-transform: translateZ(-100px) rotateX(0deg);
            -moz-transform: translateZ(-100px) rotateX(0deg);
            -ms-transform: translateZ(-100px) rotateX(0deg);
            -o-transform: translateZ(-100px) rotateX(0deg);
            transform: translateZ(-100px) rotateX(0deg);
            background: red;
        }
        .box .top{
            -webkit-transform: rotateX(-90deg) translateZ(100px);
            -moz-transform: rotateX(-90deg) translateZ(100px);
            -ms-transform: rotateX(-90deg) translateZ(100px);
            -o-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px);
            background: green;
        }
        .box .bottom{
            -webkit-transform: rotateX(90deg) translateZ(100px);
            -moz-transform: rotateX(90deg) translateZ(100px);
            -ms-transform: rotateX(90deg) translateZ(100px);
            -o-transform: rotateX(90deg) translateZ(100px);
            transform: rotateX(90deg) translateZ(100px);
            background: green;
        }
        .box .left{
            -webkit-transform: rotateY(-90deg) translateZ(100px);
            -moz-transform: rotateY(-90deg) translateZ(100px);
            -ms-transform: rotateY(-90deg) translateZ(100px);
            -o-transform: rotateY(-90deg) translateZ(100px);
            transform: rotateY(-90deg) translateZ(100px);
            background: blue;
        }.box .right{
            -webkit-transform: rotateY(90deg) translateZ(100px);
            -moz-transform: rotateY(90deg) translateZ(100px);
            -ms-transform: rotateY(90deg) translateZ(100px);
            -o-transform: rotateY(90deg) translateZ(100px);
            transform: rotateY(90deg) translateZ(100px);
            background: blue;
        }
    </style>
</head>
<body>

<div class="canvas">
    <div class="box">
        <div class="front">Fr</div>
        <div class="back">Ba</div>
        <div class="left">Le</div>
        <div class="right">Ri</div>
        <div class="top">To</div>
        <div class="bottom">Bo</div>
        
    </div>

</div>
</body>
</html>

仍是要繼續嘮叨一句，在js中到底要怎麼才能動態改變這些3D的樣式呢，再去研究會。

1. CSS3 3D旋轉立方體
2. css3 3d旋轉-正方體
3. css3炫酷立方體3D旋轉
4. css3 立方體3d旋轉效果
5. css3-實現3D立方體旋轉
6. css3 3d旋轉動畫
7. css3 3D旋轉特效
8. CSS3動畫-3D旋轉
9. css3 3D旋轉效果
10. unity 物體旋轉
更多相關文章...
• Rust 結構體 - RUST 教程
• DTD - 實體 - DTD 教程
• 互聯網組織的未來：剖析GitHub員工的任性之源
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。