<!DOCTYPE html>
<html>
<head>
<title>transform-style實現Div的3D旋轉</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
*{font-size: 24px;color: #00ff00; padding:0; margin:0;}
#container {
position: relative;
height: 300px;
width: 300px;
-webkit-perspective: 500;
margin-top: 200px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
#parent-keleyi-com {
margin: 10px;
width: 280px;
height: 280px;
background-color: #666;
opacity: 0.3;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear; // infinite 無限旋轉可改成次數
}
/*執行Y軸旋轉360度動畫*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div id="container">
<div id="parent-keleyi-com">
</div>
</div>
</body>
</html>
css3 動畫巖Y周5旋轉
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）
絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie
幾個簡單的css動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi