CSS3旋轉動畫，兼容各瀏覽器

本文轉載自查看原文 2017-01-18 16:57 7306

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3旋轉動畫</title>
<style>
div{
    width: 200px;
    height: 200px;
    background: yellow;
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
    animation:3s linear 0s myrotate;
    -webkit-animation:3s linear 0s myrotate;/* Safari and Chrome */
    animation-fill-mode:forwards;/*動畫播放完畢時停止，不回到初始狀態*/
    -webkit-animation-fill-mode:forwards;
}
@keyframes myrotate{
    form {transform:rotateY(0deg);}    
    to    {transform:rotateY(180deg);}
}
@-webkit-keyframes myrotate{/* Safari and Chrome */
    form {transform:rotateY(0deg);}    
    to    {transform:rotateY(180deg);}
}
/*第一個時間代表完成一次運動所消耗的時間，第二個時間代表動畫於多少時間后開始播放*/
/*linear代表線性運動（勻速運動）；infinite為無限運動（一直運動）*/
</style>

</head>
<body>
<div>3D旋轉</div>
<script type="text/javascript">

</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3立體旋轉動畫 button 元素的css3旋轉動畫 css3制作旋轉動畫 CSS3 元素轉圈動畫（元素旋轉動畫） CSS3 skew傾斜、rotate旋轉動畫 css3 移動端旋轉動畫暫停 CSS3實現3D球體旋轉動畫 css3兼容各版本瀏覽器前綴【css3】瀏覽器內核及其兼容性 CSS3常用屬性瀏覽器兼容前綴