如何用transition實現翻書動畫效果
阿新 • • 發佈：2018-12-28
下面給大家介紹一個小案例，可以實現翻書的效果，以開啟音樂盒為例。
這個案例主要是運用了一個transition的座標軸，在動畫效果中，要求以第二張圖片的邊緣進行翻頁。
程式碼如下：
先放入兩張圖片在body中
<body>
<div>
<img src="img/musicb.jpg" />
<img src="img/musict.jpg" />
</div>
</body>
在加入樣式
<style type="text/css"> div{ position: relative; margin: auto; top: 200px; left: 0; width: 500px; } img{ height: 300px; width: 300px; position: absolute; border-radius: 50%;<!--正方形變圓形--> } img:nth-of-type(1){ z-index: 20; transition: 2s; <!--動畫運動的時間--> transform-origin: left; <!--沿著第二張圖片的左邊翻轉--> } img:nth-of-type(1):hover{ transform: rotateY(180deg);<!--沿Y軸翻轉--> } </style>
附上效果圖：
再給大家加一個小知識:
transition-timing-function:linear;這句是說這個動畫在兩秒內要勻速運動，還有其他三種運動方式，下面附上一張圖片：