CSS3實現的3D旋轉效果

admin發表於2017-02-11
CSSS33D
由於CSS3的出現，實現3D動畫效果也更為輕鬆便捷，下面就是一段能夠實現3D旋轉效果的程式碼，希望對大家能夠帶來參考作用。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  font-size:14px;
  color:#fff;
  padding:0;
  margin:0;
}
#container {
  position:relative;
  height 300px;
  width:300px;
  -webkit-perspective:500;
  margin-top:200px;
  margin-right:auto;
  margin-left:auto;
}
#parent {
  margin:10px;
  width:280px;
  height:280px;
  background-color:#666;
  opacity:0.3;
  -webkit-transform-style:preserve-3d;
  -webkit-animation:spin 15s infinite linear;
}
#parent > div {
  position:absolute;
  top:40px;
  left:40px;
  width:280px;
  height:200px;
  padding:10px;
  -webkit-box-sizing:border-box;
}
#parent > :first-child {
  background-color:#000;
  -webkit-transform:translateZ(-100px) rotateY(45deg);
}
#parent > :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 id="container">
  <div id="parent">
    <div><a href="#">螞蟻部落歡迎您</a></div>
  </div>
</div>
</body>
</html>

相關文章