首頁 >web前端 >html教學 >CSS3实现的3D旋转效果_html/css_WEB-ITnose

CSS3实现的3D旋转效果_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:30:341215瀏覽

CSS3实现的3D旋转效果:
由于CSS3的出现,实现3D动画效果也更为轻松便捷,下面就是一段能够实现3D旋转效果的代码,希望对大家能够带来参考作用。
代码如下:

 

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

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11843

更多内容可以参阅:http://www.softwhy.com/divcss/

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn