transform 属性 实现旋转木马效果
生活随笔
收集整理的這篇文章主要介紹了
transform 属性 实现旋转木马效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
搭建舞臺
...<style type="text/css">.main{width: 900px;min-height: 100px;margin:0 auto;padding: 100px 50px;background-color: #f0f0f0;box-shadow: inset 0 0 3px rgba(0,0,0,.35);position: relative;top: 0;display: flex;justify-content: center;}.container{width: 128px;height: 100px;position: relative;}.inner{width: 128px;height: 100px;box-shadow: 0 1px 3px rgba(0,0,0,.5);position: absolute;bottom: 0;}.inner:nth-child(1) { transform: rotateY( 0deg );background-color: #ccffff; }.inner:nth-child(2) { transform: rotateY( 40deg );background-color: #ccccff; }.inner:nth-child(3) { transform: rotateY( 80deg );background-color: #99ffff; }.inner:nth-child(4) { transform: rotateY( 120deg );background-color: #99ffcc; }.inner:nth-child(5) { transform: rotateY( 160deg );background-color: #ffccff; }.inner:nth-child(6) { transform: rotateY( 200deg );background-color: #ffcccc; }.inner:nth-child(7) { transform: rotateY( 240deg );background-color: #ffffcc; }.inner:nth-child(8) { transform: rotateY( 280deg );background-color: #ccff00; }.inner:nth-child(9) { transform: rotateY( 320deg );background-color: #99ff00; }</style>...<!-- 舞臺 --><div class="main"><!-- 容器 --><div id="container" class="container"><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div></div></div>...效果圖
- 我們對方塊設置了按Y軸進行旋轉，看見的只是方塊變小，沒有按Y軸旋轉。是因為現在還是處于2D視角，沒有透視效果。
加入 perspective 屬性
效果圖
- 添加屬性后就能看見，方塊的旋轉效果了。
- 這時可以看見其他方塊被最后一個方塊遮住。這是因為方塊是在2D空間旋轉的。
加入 transform-style 屬性
效果圖
- 這里就按我們的要求，所有方塊都按y軸旋轉了。
- 不過現在都是擠在一起的。就要使用transform 屬性讓方塊分散開來。
加入 translateZ() 函數
效果圖
- 這樣一個簡單的靜態效果就出來了
加入交互效果
....container{.../* 添加過度動畫 */-webkit-transition: -webkit-transform 1s;-moz-transition: -moz-transform 1s;transition: transform 1s;}...<body>...<script type="text/javascript">var container = document.getElementById("container");var deg = 0;container.onclick = function(e){deg = deg + 40;container.style.transform = `rotateY(${deg}deg)`;}</script></body> ...- 可以選擇 旋轉容器 或則 修改每個方塊的旋轉度數。這里直接旋轉的容器。
- 每次加 40 是因為我們，默認每個方塊都多旋轉 40 度。
- 還需要一個過度效果 添加transition屬性，css自動實現每一幀的動畫。
效果圖
總結
以上是生活随笔為你收集整理的transform 属性 实现旋转木马效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【word使用】word文档查看字符统计
- 下一篇： 计算机编程跟英语关系大吗,编程与英语的关