Css3動畫（一） 如何畫3D旋轉效果或者衛星圍繞旋轉效果
如何畫3D旋轉效果或者衛星圍繞旋轉效果，當然這個也是工作中的一個任務，我在網上翻了一下，並沒有找到類似的東西，所以寫下來還是費了一番功夫，因此我把它拿出來記錄一下，當然替換了一部分內容。好了，話不多說，進入正題。
我們都知道，瀏覽器是一個平面的視覺效果，如何在一個平面上看出立體的3D效果呢，其實就是一個視覺差的問題。那我們就從一個平面視覺效果一步一步畫出立體的3D效果來。
一、先畫出平面視覺上衛星的旋轉軌跡
衛星的軌跡一般都是圓的或者橢圓的，我們就先以一個圓形的軌跡為例。
非常簡單，就是畫一個圓形的軌跡，然后利用弧度公式計算出每個衛星在軌跡上的位置。比如：
三個衛星，弧度就是 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;）什么意思呢，就是讓兩個元素可以保持相對的立體空間效果。比如，土星圖片和衛星軌道平面是垂直的，需要用這個屬性來保持這個的空間效果。
<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>
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。