您的位置:首页 - 教程 - CSS - 正文
CSS3女神图片旋转木马
查看效果:http://hovertree.com/texiao/css/14/

本效果用css3的animation实现动画

定义和用法
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

默认值: none 0 ease 0 1 normal
继承性: no
版本: CSS3
JavaScript 语法: object.style.animation="mymove 5s infinite"


语法
animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

示例:http://hovertree.com/texiao/css/14/1.htm


图片旋转代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3女神来袭 - 何问起</title>
<style>
body {
margin: 0;
background: #000;
}

#wrap {
width: 300px;
height: 400px;
position: relative;
margin: 100px auto;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-transform: perspective(3000px);
-ms-perspective: 3000px;
}

#head {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: donghua 15s linear 0s infinite;
-moz-transform-style: preserve-3d;
-moz-animation: donghua 15s linear 0s infinite;
-ms-transform-style: preserve-3d;
-ms-animation: donghua 25s linear 0s infinite;
}

#head div {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 100px;
}

#head div:nth-child(1) {
-webkit-transform: rotateY(0deg) translateZ(400px);
-moz-transform: rotateY(0deg) translateZ(400px);
-ms-transform: rotateY(0deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/01.jpg);
background-size: cover;
}

#head div:nth-child(2) {
-webkit-transform: rotateY(36deg) translateZ(500px);
-moz-transform: rotateY(36deg) translateZ(500px);
-ms-transform: rotateY(36deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/02.jpg);
background-size: cover;
}

#head div:nth-child(3) {
-webkit-transform: rotateY(72deg) translateZ(400px);
-moz-transform: rotateY(72deg) translateZ(400px);
-ms-transform: rotateY(72deg) translateZ(400px);
background: url(http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg);
background-size: cover;
}

#head div:nth-child(4) {
-webkit-transform: rotateY(108deg) translateZ(500px);
-moz-transform: rotateY(108deg) translateZ(500px);
-ms-transform: rotateY(108deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/04.jpg);
background-size: cover;
}

#head div:nth-child(5) {
-webkit-transform: rotateY(144deg) translateZ(400px);
-moz-transform: rotateY(144deg) translateZ(400px);
-ms-transform: rotateY(144deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/05.jpg);
background-size: cover;
}

#head div:nth-child(6) {
-webkit-transform: rotateY(180deg) translateZ(500px);
-moz-transform: rotateY(180deg) translateZ(500px);
-ms-transform: rotateY(180deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/06.jpg);
background-size: cover;
}

#head div:nth-child(7) {
-webkit-transform: rotateY(216deg) translateZ(400px);
-moz-transform: rotateY(216deg) translateZ(400px);
-ms-transform: rotateY(216deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/07.jpg);
background-size: cover;
}

#head div:nth-child(8) {
-webkit-transform: rotateY(252deg) translateZ(500px);
-moz-transform: rotateY(252deg) translateZ(500px);
-ms-transform: rotateY(252deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/08.jpg);
background-size: cover;
}

#head div:nth-child(9) {
-webkit-transform: rotateY(288deg) translateZ(400px);
-moz-transform: rotateY(288deg) translateZ(400px);
-ms-transform: rotateY(288deg) translateZ(400px);
background: url(http://hovertree.com/hvtimg/201511/6j9j6tk5.png);
background-size: cover;
}

#head div:nth-child(10) {
-webkit-transform: rotateY(324deg) translateZ(500px);
-moz-transform: rotateY(324deg) translateZ(500px);
-ms-transform: rotateY(324deg) translateZ(500px);
background: url(http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg);
background-size: cover;
}

@-webkit-keyframes donghua {
0% {
transform: rotateX(5deg) rotateY(360deg);
}

50% {
transform: rotateX(-5deg) rotateY(180deg);
}

100% {
transform: rotateX(5deg) rotateY(0deg);
}
}

@-moz-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}

50% {
transform: rotateY(-10deg) rotateY(180deg);
}

100% {
transform: rotateY(10deg) rotateY(360deg);
}
}

@-ms-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}

50% {
transform: rotateY(-10deg) rotateY(180deg);
}

100% {
transform: rotateY(10deg) rotateY(360deg);
}
}a{color:white}
</style>
</head>
<body>

<div id="wrap">
<div id="head">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div><div style="margin:0px auto;text-align:center;width:736px">
<h2>图片立体旋转</h2><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/h/bjaf/a6598spx.htm">原文</a>
</div>
</body>
</html>

评论: