css3旋转木马_动力节点Java学院整理
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
1、perspective
perspective属性包括两个属性:none和具有单位的长度值。
其中perspective属性的默认值为none,表示无限的角度来看3D物体,但看上去是平的。另一个值<length>接受一个长度单位大于0的值。而且其单位不能为百分比值。<length>值越大,角度出现的越远,从而创建一个相当低的强度和非常小的3D空间变化。反之,此值越小,角度出现的越近,从而创建一个高强度的角度和一个大型3D变化。简单一点说:当perspective设置length时,如果越小则表示3D效果越明显,你的眼睛就越靠近3D物体,反之则反之。
2、transform: translateZ(length)
假设设置了perspective:300px时,设置translateZ的值越小则子元素大小越小,当设置值接近300px时,则仿佛此元素在面前,当超过300px以后,则以前到达你视野的后面,该元素就不可见了。
上例的核心:
1、首先所有的图片的容器position:absolute,叠加在一起,然后一次设置rotateY分别为40*i ,i= 0 , 1, 2...9 ;所有图片会相交成一个类似花的形状
2、然后为每个图片的容器设置translateZ,所有图片会从对应的角度向外移动,扩展成一个大圆,即上图效果。
html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html> < html > < head > < title ></ title > < meta charset = "utf-8" /> < link href = "css/reset.css" rel = "stylesheet" type = "text/css" /> < script type = "text/javascript" src = "../../jquery-1.8.3.js" ></ script > < script type = "text/javascript" > // alert( 64 / Math.tan(20 / 180 * Math.PI)); var transform = function (element, value, key) { key = key || "Transform"; ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix) { element.style[prefix + key] = value; }); return element; } $(function () { var deg = -40 , i = 1; $("#container").click(function () { transform($(this)[0], "rotateY(" + (deg * i++) + "deg)") }); }); </ script > </ head > < body > < div id = "stage" > < ul id = "container" > < li > < img src = "img/1.jpg" /> < span >Do one thing at a time, and do well..</ span > </ li > < li > < img src = "img/2.jpg" /> < span >Do one thing at a time, and do well..</ span > </ li > < li > < img src = "img/3.jpg" /> < span >Keep on going never give up.</ span > </ li > < li > < img src = "img/4.jpg" /> < span >Whatever is worth doing is worth doing well.</ span > </ li > < li > < img src = "img/5.jpg" /> < span >Believe in yourself.</ span > </ li > < li > < img src = "img/6.jpg" /> < span >Action speak louder than words.</ span > </ li > < li > < img src = "img/7.jpg" /> < span >Never put off what you can do today until tomorrow.</ span > </ li > < li > < img src = "img/8.jpg" /> < span >Jack of all trades and master of none.</ span > </ li > < li > < img src = "img/9.jpg" /> < span >Judge not from appearances.</ span > </ li > </ ul > </ div > </ body > </ html > |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | li { width : 128px ; box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , . 5 ); position : absolute ; bottom : 0 ; } li img { width : 128px ; box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , . 5 ); vertical-align : middle ; } li span { display : block ; width : 128px ; text-align : center ; color : #333 ; font-size : 8px ; } #stage { width : 900px ; min-height : 100px ; margin-left : auto ; margin-right : auto ; padding : 100px 50px ; -webkit-perspective: 1200px ; position : relative ; } #container { background : url ( "img/xawl.jpg" ) no-repeat 0 0 ; margin-top : 200px ; width : 128px ; box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , 5 ); height : 100px ; margin-left : -64px ; -webkit-transition: -webkit-transform 1 s; transition: transform 1 s; -webkit-transform-style: preserve -3 d; position : absolute ; left : 50% ; } li:nth-child( 0 ) { -webkit-transform: rotateY( 0 deg) translateZ( 300px ); } li:nth-child( 1 ) { -webkit-transform: rotateY( 40 deg) translateZ( 300px ); } li:nth-child( 2 ) { -webkit-transform: rotateY( 80 deg) translateZ( 300px ); } li:nth-child( 3 ) { -webkit-transform: rotateY( 120 deg) translateZ( 300px ); } li:nth-child( 4 ) { -webkit-transform: rotateY( 160 deg) translateZ( 300px ); } li:nth-child( 5 ) { -webkit-transform: rotateY( 200 deg) translateZ( 300px ); } li:nth-child( 6 ) { -webkit-transform: rotateY( 240 deg) translateZ( 300px ); } li:nth-child( 7 ) { -webkit-transform: rotateY( 280 deg) translateZ( 300px ); } li:nth-child( 8 ) { -webkit-transform: rotateY( 320 deg) translateZ( 300px ); } li:nth-child( 9 ) { -webkit-transform: rotateY( 360 deg) translateZ( 300px ); } |
div#stage作为舞台,设置perspective,每个li分别设置rotateY,以及translateZ;然后我们会div#container设置了-webkit-transform-style: preserve-3d;
transform-style: flat | preserve-3d
其中flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。如果对一个元素设置了transform-style的值为preserve-3d,它表示不执行平展操作,他的所有子元素位于3D空间中。一般情况下,此属性用于3D动画效果的执行元素,即就是它要应用3D动画效果,所以它的子元素都应该在3D空间。
有一点要注意:本例子,其实正在的动画效果,在于鼠标点击,div#Container在不端的改变rotateY,所有的图片元素均在div#container中,且已经展现为旋转木马效果,现在要做的就是旋转这个木马,所以只需要每次改变div#container的rotateY 40角度即可。
相关文章
- 这篇文章主要介绍了HTML5+css3:3D旋转木马效果相册,主要运用了perspective和tranlateY这两个知识点,有需要的可以了解一下。2017-01-03
最新评论