知識點一:旋轉
新加的屬性:transform: rotateZ(ndeg);
知識點二:過度動畫
transform-style:preserve-3d;// 設置成3D的效果,,必加的東西
perspective: 800px-2000px; //設置成右側邊陰影的。。。。。
@keyframes name { 0% { transform: rotate(180deg); } 180% { transform: rotate(360deg); } 360% { trnsform: rotate(720deg); } }//結束到這 。。。結束
animation: name 20s; //過渡加在動畫的元素上
或者是這種。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
animation-name: name;
animation-duration: 3s;//動畫指定需要多少秒或毫秒完成
animation-timing-function: 設置動畫將如何完成一個周期
animation-delay: 時間; //設置動畫在啟動前的延遲間隔。