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

時間 2019-11-16

標籤 css3 css 旋轉動畫兼容瀏覽器欄目 CSS 简体版

原文原文鏈接

<!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>

相關標籤/搜索