Heim >Web-Frontend >HTML-Tutorial >css3相册图片3D旋转展示特效_html/css_WEB-ITnose
css3相册图片3D旋转展示特效_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:342064Durchsuche
查看效果：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="movehovertree 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> <a href="http://hovertree.com/texiao/css/14/1.htm">Demo 2</a></div></body></html> 更多：
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3实现的3D旋转效果_html/css_WEB-ITnoseNächster Artikel：关于【bootstrap】中，【tooltip】的不算bug的bug的个人看法_html/css_WEB-ITnose