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

時間  2019-11-08
標籤 css3 css 動畫 如何 3d 旋轉 效果 或者 衛星 圍繞 欄目 CSS 简体版
原文   原文鏈接

如何畫3D旋轉效果或者衛星圍繞旋轉效果，固然這個也是工做中的一個任務，我在網上翻了一下，並無找到相似的東西，因此寫下來仍是費了一番功夫，所以我把它拿出來記錄一下，固然替換了一部份內容。好了，話很少說，進入正題。javascript

咱們都知道，瀏覽器是一個平面的視覺效果，如何在一個平面上看出立體的3D效果呢，其實就是一個視覺差的問題。那咱們就從一個平面視覺效果一步一步畫出立體的3D效果來。我仍是先把效果放出來吧，點擊預覽(終版)css

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

衛星的軌跡通常都是圓的或者橢圓的，咱們就先以一個圓形的軌跡爲例。html

 

很是簡單，就是畫一個圓形的軌跡，而後利用弧度公式計算出每一個衛星在軌跡上的位置。好比：java

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

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

利用勾股定理是否是就能夠計算出每一個衛星的位置了。 如今咱們把樣式加上，就能夠看到旋轉的衛星了。平面效果； 如代碼中所示，咱們在13s內，讓整個div自轉一週（360度），爲了兼容更多的瀏覽器，因此寫了一大坨，若是不明白能夠看一下 CSS3 之動畫及兼容性調優
涉及的知識點： 動畫的過程拆分，三角形邊長位置計算sass

.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); } }

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

如今咱們要把這個平面的圓形以一條直徑爲轉軸，旋轉76度，是否是就了一點點的立體感受了。其實它仍是一個平面，爲何能看到立體的感受呢？ 由於咱們都知道一個遠小近大的道理：當衛星轉向內圈的時候，咱們讓球體逐漸變大；當衛星轉向外圈的時候，咱們讓球體逐漸變小，這樣就會產生一個遠近景深的效果，也就產生了立體的感受。app

涉及的知識點：3D 元素距視圖的距離（perspective），圖形的角度處理
 
 

3、畫一個參照物

立體的旋轉效果有了，可是咱們的眼睛其實沒法分辨哪一個是內圈，哪一個是外圈，咱們須要在中間放一個參照物來告訴咱們的眼睛，哪一個在前，哪一個在後。這樣，一個完整的衛星圍繞旋轉效果就出來了。動畫

涉及的知識點：讓轉換的子元素保留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格式）內容：ui

.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;
            }
        }
    }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程