HTML5+CSS3做一个3D旋转木马相册，鼠标悬停时，停止旋转，移开继续旋转，大家把图片替换成自己的即可。
10年积累的成都网站制作、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有杭州免费网站建设让你可以放心的选择与我们合作。
效果：
源码：
以下是代码：
!DOCTYPE html
html
head
titletransform-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="" target="_blank"原文/a/div
div id="container"
div id="parent-keleyi-com"
diva href="/"柯乐义/a/div
diva href="/"keleyi.com/a/div
/div
/div
/body
/html
HTML5非常强大，尤其是和CSS3结合，有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用，它可以用鼠标多拽从多个角度浏览相册图片，点击图片，就可以放大图片。
HTML5非常强大，尤其是和CSS3结合，有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用，它可以用鼠标多拽从多个角度浏览相册图片，点击图片，就可以放大图片，相册图片都是美女，千万别让女朋友看到。
