Css3動畫(一) 如何畫3D旋轉效果或者衛星圍繞旋轉效果


  如何畫3D旋轉效果或者衛星圍繞旋轉效果,當然這個也是工作中的一個任務,我在網上翻了一下,並沒有找到類似的東西,所以寫下來還是費了一番功夫,因此我把它拿出來記錄一下,當然替換了一部分內容。好了,話不多說,進入正題。

  我們都知道,瀏覽器是一個平面的視覺效果,如何在一個平面上看出立體的3D效果呢,其實就是一個視覺差的問題。那我們就從一個平面視覺效果一步一步畫出立體的3D效果來。

由 www.webfunny.cn 前端監控提供只需要簡單幾步就可以搭建一套屬於自己的前端監控系統,快來試試吧 ^ _ ^

一、先畫出平面視覺上衛星的旋轉軌跡

衛星的軌跡一般都是圓的或者橢圓的,我們就先以一個圓形的軌跡為例。

 

非常簡單,就是畫一個圓形的軌跡,然后利用弧度公式計算出每個衛星在軌跡上的位置。比如:

三個衛星,弧度就是 var radian =2 * Math.PI /360 *60,更多的衛星就同理計算弧度

它們三個組成的三角形邊長就是:var langWidth = Math.sin(radian) * rWidth

利用勾股定理是不是就可以計算出每個衛星的位置了。 現在我們把樣式加上,就可以看到旋轉的衛星了。 如代碼中所示,我們在13s內,讓整個div自轉一周(360度),為了兼容更多的瀏覽器,所以寫了一大坨,如果不明白可以看一下 CSS3 之動畫及兼容性調優
涉及的知識點: 動畫的過程拆分,三角形邊長位置計算

.r1{ animation:rotate 13s linear infinite; -webkit-animation:rotate 13s linear infinite; -moz-animation:rotate 13s linear infinite; -o-animation:rotate 13s linear infinite; } @keyframes rotate{ 0%{ transform:rotate(0deg)skew(0deg)scale(1); -ms-transform:rotate(0deg)skew(0deg)scale(1); -moz-transform:rotate(0deg)skew(0deg)scale(1); -webkit-transform:rotate(0deg)skew(0deg)scale(1); -o-transform:rotate(0deg)skew(0deg)scale(1); } 100%{ transform:rotate(360deg)skew(0deg)scale(1); -ms-transform:rotate(360deg)skew(0deg)scale(1); -moz-transform:rotate(360deg)skew(0deg)scale(1); -webkit-transform:rotate(360deg)skew(0deg)scale(1); -o-transform:rotate(360deg)skew(0deg)scale(1); } } 

二、畫出衛星3D立體的旋轉的效果

現在我們要把這個平面的圓形以一條直徑為轉軸,旋轉76度,是不是就了一點點的立體感覺了。其實它還是一個平面,為什么能看到立體的感覺呢? 因為我們都知道一個遠小近大的道理:當衛星轉向內圈的時候,我們讓球體逐漸變大;當衛星轉向外圈的時候,我們讓球體逐漸變小,這樣就會產生一個遠近景深的效果,也就產生了立體的感覺。

涉及的知識點:3D 元素距視圖的距離(perspective),圖形的角度處理
 
 

三、畫一個參照物

立體的旋轉效果有了,但是我們的眼睛其實無法分辨哪個是內圈,哪個是外圈,我們需要在中間放一個參照物來告訴我們的眼睛,哪個在前,哪個在后。這樣,一個完整的衛星圍繞旋轉效果就出來了。

涉及的知識點:讓轉換的子元素保留3D轉換(transform-style: preserve-3d;)什么意思呢,就是讓兩個元素可以保持相對的立體空間效果。比如,土星圖片和衛星軌道平面是垂直的,需要用這個屬性來保持這個的空間效果。
 
html 內容:
<body>
    <div class="star-animate">
          <div class="out_circle">
            <div class="nav_circle r1">
              <img class="center-img1" src={require("Images/animateList/1/star.png")}/>
              <div class="img_top img">
                <img src={require("Images/animateList/1/star1.png")}/>
              </div>
              <div class="img_bottom img">
                <img src={require("Images/animateList/1/star2.png")}/>
              </div>
              <div class="img_bottom2 img">
                <img src={require("Images/animateList/1/star3.png")}/>
              </div>
            </div>
          </div>
        </div>
</body>
 
js內容:
 
    const outWidth = $(".out_circle").width()
    $(".out_circle").height(outWidth)
    // 獲取半徑
    const rWidth = outWidth / 2
    // 獲得弧度
    const radian = 2 * Math.PI / 360 * 60
    // 長邊
    const langWidth = Math.sin(radian) * rWidth

    // icon的長度
    const iconWidth = $(".img_top").width()

    $(".img_top").css({
      top: 0 - iconWidth / 2,
      left: rWidth - iconWidth / 2
    })

    $(".img_bottom").css({
      top: rWidth * 1.5 - iconWidth / 2,
      left: rWidth - langWidth - iconWidth / 2
    })

    $(".img_bottom2").css({
      top: rWidth * 1.5 - iconWidth / 2,
      left: outWidth - (rWidth - langWidth) - iconWidth / 2
    })

  

css(sass格式)內容:

.star-animate {
        width: 100%;
        height: 100%;
        background: url("~Images/animateList/1/bg.jpeg");
        background-size: cover;

        .out_circle{
            width: 400px;
            height: 400px;
            margin: auto;
            border-radius:50%;
            position: relative;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            perspective: 30000;
            -webkit-perspective: 30000;
            transform: rotateX(76deg);
            -webkit-transform: rotateX(76deg); /* Safari and Chrome */
        }
        .center-img1 {
            animation: rotate_change1 13s linear infinite;
            -webkit-animation:rotate_change1 13s linear infinite;
            -moz-animation:rotate_change1 13s linear infinite;
            -o-animation:rotate_change1 13s linear infinite;
        }
        .center-img1 {
            position: absolute;
            left: 6%;
            top: 25.5%;
            width: 88%;
            height: 49%;
            transform: rotateX(70deg);
            -webkit-transform: rotateX(70deg); /* Safari and Chrome */
        }
        .test-div {
            position: absolute;
            width: 200px;
            height: 625px;
            background: red;
            left: 128px;
            top: -71px;
        }
        .nav_circle{
            width:100%;
            height:100%;
            float:left;
            position:absolute;
            top:0;
            text-align:center;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
        }
        @keyframes rotate_change1{
            0%{
                transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -ms-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -moz-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -webkit-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -o-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
            }
            100%{
                transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -ms-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -moz-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -webkit-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -o-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
            }
        }
        @keyframes rotate_change2{
            0%{
                transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -ms-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -moz-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -webkit-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -o-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                opacity: 0;
            }
            5%{
                opacity: 1;
            }
            17%{
                opacity: 1;
            }
            29%{
                opacity: 1;
            }
            34%{
                opacity: 0;
            }
            50%{
                opacity: 0;
            }
            67%{
                opacity: 0;
            }
            83%{
                opacity: 0;
            }
            100%{
                opacity: 0;
                transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -ms-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -moz-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -webkit-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -o-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
            }
        }
        @keyframes rotate_change3{
            0%{
                transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -ms-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -moz-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -webkit-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -o-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                opacity: 0;
            }
            17%{
                opacity: 0;
            }
            34%{
                opacity: 0;
            }
            50%{
                opacity: 0;
            }
            67%{
                opacity: 0;
            }
            72%{
                opacity: 1;
            }
            83%{
                opacity: 1;
            }
            95%{
                opacity: 1;
            }
            100%{
                opacity: 0;
                transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -ms-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -moz-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -webkit-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -o-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
            }
        }

        .img_top img, .img_bottom img, .img_bottom2 img {
            width: 100px;
            height: 100px;
        }
        .img_top,.img_bottom,.img_bottom2{
            position: absolute;
            z-index:1;
            transform:rotateX(70deg);
            -ms-transform:rotateX(70deg);
        }
        .nav_circle .img a{
            position: absolute;
            top:10px;
            left:94px;
            width: 52px;
        }

        .r1{
            animation: rotate 13s linear infinite;
            -webkit-animation:rotate 13s linear infinite;
            -moz-animation:rotate 13s linear infinite;
            -o-animation:rotate 13s linear infinite;
        }
        .r1 .img_top{
            animation:rotate_c1 13s linear infinite;
            -webkit-animation:rotate_c1 13s linear infinite;
        }

        .r1 .img_bottom{
            animation:rotate_c2 13s linear infinite;
            -webkit-animation:rotate_c2 13s linear infinite;
        }
        .r1 .img_bottom2{
            animation:rotate_c3 13s linear infinite;
            -webkit-animation:rotate_c3 13s linear infinite;
        }
        /* 外圈放大動畫 */
        @keyframes circle_rotate{
            0%{
                width: 120px;
                height: 120px;
                margin-left: -10px;
                margin-top: -10px;
            }
            100%{
                width: 100px;
                height: 100px;
                margin-left: 0px;
                margin-top: 0px;
            }
        }

        @keyframes rotate{
            0%{
                transform:rotate(0deg) skew(0deg) scale(1);
                -ms-transform:rotate(0deg) skew(0deg) scale(1);
                -moz-transform:rotate(0deg) skew(0deg) scale(1);
                -webkit-transform:rotate(0deg) skew(0deg) scale(1);
                -o-transform:rotate(0deg) skew(0deg) scale(1);
            }
            100%{
                transform:rotate(360deg) skew(0deg) scale(1);
                -ms-transform:rotate(360deg) skew(0deg) scale(1);
                -moz-transform:rotate(360deg) skew(0deg) scale(1);
                -webkit-transform:rotate(360deg) skew(0deg) scale(1);
                -o-transform:rotate(360deg) skew(0deg) scale(1);
            }
        }
        @keyframes rotate-center{
            0%{
                transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -ms-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -moz-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -webkit-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
                -o-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);
            }
            100%{
                transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -ms-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -moz-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -webkit-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
                -o-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);
            }
        }

        @keyframes rotate_c1{
            0%{
                transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);
                -ms-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);
                -moz-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);
                -webkit-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);
                -o-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);
            }
            50%{
                transform:rotateX(-70deg) rotateY(180deg)  skew(0deg) scale(1);
                -ms-transform:rotateX(-70deg) rotateY(180deg)  skew(0deg) scale(1);
                -moz-transform:rotateX(-70deg) rotateY(180deg)  skew(0deg) scale(1);
                -webkit-transform:rotateX(-70deg) rotateY(180deg)  skew(0deg) scale(1);
                -o-transform:rotateX(-70deg) rotateY(180deg)  skew(0deg) scale(1);
            }
            100%{
                transform:rotateX(-70deg) rotateY(360deg)  skew(0deg) scale(0.01);
                -ms-transform:rotateX(-70deg) rotateY(360deg)  skew(0deg) scale(0.01);
                -moz-transform:rotateX(-70deg) rotateY(360deg)  skew(0deg) scale(0.01);
                -webkit-transform:rotateX(-70deg) rotateY(360deg)  skew(0deg) scale(0.01);
                -o-transform:rotateX(-70deg) rotateY(360deg)  skew(0deg) scale(0.01);
            }
        }

        @keyframes rotate_c2{
            0%{
                transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
                -ms-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
                -moz-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
                -webkit-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
                -o-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
            }
            34%{
                transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);
                -ms-transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);
                -moz-transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);
                -webkit-transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);
                -o-transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);
            }
            83%{
                transform:rotateX(-70deg) rotateY(300deg)  skew(0deg) scale(1);
                -ms-transform:rotateX(-70deg)  rotateY(300deg) skew(0deg) scale(1);
                -moz-transform:rotateX(-70deg)  rotateY(300deg) skew(0deg) scale(1);
                -webkit-transform:rotateX(-70deg) rotateY(300deg)  skew(0deg) scale(1);
                -o-transform:rotateX(-70deg) rotateY(300deg)  skew(0deg) scale(1);
            }
            100%{
                transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
                -ms-transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
                -moz-transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
                -webkit-transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
                -o-transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
            }
        }

        @keyframes rotate_c3{
            0%{
                transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
                -ms-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
                -moz-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
                -webkit-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
                -o-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);
            }
            17%{
                transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);
                -ms-transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);
                -moz-transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);
                -webkit-transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);
                -o-transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);
            }
            67%{
                transform:rotateX(-70deg) rotateY(240deg)  skew(0deg) scale(0.01);
                -ms-transform:rotateX(-70deg)  rotateY(240deg) skew(0deg) scale(0.01);
                -moz-transform:rotateX(-70deg)  rotateY(240deg) skew(0deg) scale(0.01);
                -webkit-transform:rotateX(-70deg) rotateY(240deg)  skew(0deg) scale(0.01);
                -o-transform:rotateX(-70deg) rotateY(240deg)  skew(0deg) scale(0.01);
            }
            100%{
                transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
                -ms-transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
                -moz-transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
                -webkit-transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
                -o-transform:rotateX(-70deg)  rotateY(360deg) skew(0deg) scale(0.67);
            }
        }
        .line-box {
            position: absolute;
            width: 300px;
            height: 200px;
            top: 35%;
            right: 1%;
        }

        /* 標題動畫 */
        @keyframes des1_appear{
            0%{
                opacity: 0;
            }
            17%{
                opacity: 0;
            }
            34%{
                opacity: 0;
            }
            39%{
                opacity: 1;
            }
            50%{
                opacity: 1;
            }
            62%{
                opacity: 1;
            }
            67%{
                opacity: 0;
            }
            83%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes des2_appear{
            0%{
                opacity: 0;
            }
            5%{
                opacity: 1;
            }
            17%{
                opacity: 1;
            }
            29%{
                opacity: 1;
            }
            34%{
                opacity: 0;
            }
            50%{
                opacity: 0;
            }
            67%{
                opacity: 0;
            }
            83%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes des3_appear {
            0%{
                opacity: 0;
            }
            17%{
                opacity: 0;
            }
            34%{
                opacity: 0;
            }
            50%{
                opacity: 0;
            }
            67%{
                opacity: 0;
            }
            72%{
                opacity: 1;
            }
            83%{
                opacity: 1;
            }
            95%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }


        @keyframes snap_line1_appear{
            0%{
                width: 0px;
            }
            17%{
                width: 0px;
            }
            34%{
                width: 0px;
            }
            39%{
                width: 0px;
            }
            50%{
                width: 140px;
            }
            62%{
                width: 140px;
            }
            67%{
                width: 0px;
            }
            83%{
                width: 0px;
            }
            100%{
                width: 0px;
            }
        }

        @keyframes snap_line2_appear{
            0%{
                width: 0px;
            }
            5%{
                width: 0px;
            }
            17%{
                width: 140px;
            }
            29%{
                width: 140px;
            }
            34%{
                width: 0px;
            }
            50%{
                width: 0px;
            }
            67%{
                width: 0px;
            }
            83%{
                width: 0px;
            }
            100%{
                width: 0px;
            }
        }

        @keyframes snap_line3_appear {
            0%{
                width: 0px;
            }
            17%{
                width: 0px;
            }
            34%{
                width: 0px;
            }
            50%{
                width: 0px;
            }
            67%{
                width: 0px;
            }
            72%{
                width: 0px;
            }
            83%{
                width: 140px;
            }
            95%{
                width: 140px;
            }
            100%{
                width: 0px;
            }
        }
    }

  

 
 
 
 
打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2022 CODEPRJ.COM