用CSS3讓div立體3D的旋轉
編輯：HTML5特效代碼
點擊這裡查看效果：
http:///keleyi/phtml/css3/6.htm
效果圖：
CSS3 transform-style 屬性
css3.0中transform的一個綜合例子
旋轉的圖片
CSS3 transform 屬性
以下是代碼：
<!DOCTYPE html>
<html>
<head>
<title>transform-style實現Div的3D旋轉-</title>
<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;
}
#parent-keleyi-com {
margin: 10px;
width: 280px;
height: 280px;
background-color: #666;
opacity: 0.3;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 15s infinite linear;
}
#parent-keleyi-com > div {
position: absolute;
top: 40px;
left: 40px;
width: 280px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
}
#parent-keleyi-com > :first-child {
background-color: #000;
-webkit-transform: translateZ(-100px) rotateY(45deg);
}
#parent-keleyi-com > :last-child {
background-color: #333;
-webkit-transform: translateZ(50px) rotateX(20deg);
-webkit-transform-origin: 50% top;
}
/*執行Y軸旋轉360度動畫*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div>請使用支持CSS3的浏覽器<a href="http:///a/bjad/s89uo4t1.htm" target="_blank">原文</a></div>
<div id="container">
<div id="parent-keleyi-com">
<div><a href="/"></a></div>
<div><a href="/"></a></div>
</div>
</div>
</body>
</html>
小編推薦
熱門推薦