您现在的位置是：网站首页> 编程资料编程资料

css3旋转木马_动力节点Java学院整理 HTML5+css3：3D旋转木马效果相册

2021-09-04 831人已围观

简介这篇文章主要介绍了css3旋转木马,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

1、perspective

perspective属性包括两个属性：none和具有单位的长度值。

其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值接受一个长度单位大于0的值。而且其单位不能为百分比值。值越大，角度出现的越远，从而创建一个相当低的强度和非常小的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:

Do one thing at a time, and do well..
Do one thing at a time, and do well..
Keep on going never give up.
Whatever is worth doing is worth doing well.
Believe in yourself.
Action speak louder than words.
Never put off what you can do today until tomorrow.
Jack of all trades and master of none.
Judge not from appearances.

CSS：

 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 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; position: absolute; left: 50%; } li:nth-child(0) { -webkit-transform: rotateY(0deg) translateZ(300px); } li:nth-child(1) { -webkit-transform: rotateY(40deg) translateZ(300px); } li:nth-child(2) { -webkit-transform: rotateY(80deg) translateZ(300px); } li:nth-child(3) { -webkit-transform: rotateY(120deg) translateZ(300px); } li:nth-child(4) { -webkit-transform: rotateY(160deg) translateZ(300px); } li:nth-child(5) { -webkit-transform: rotateY(200deg) translateZ(300px); } li:nth-child(6) { -webkit-transform: rotateY(240deg) translateZ(300px); } li:nth-child(7) { -webkit-transform: rotateY(280deg) translateZ(300px); } li:nth-child(8) { -webkit-transform: rotateY(320deg) translateZ(300px); } li:nth-child(9) { -webkit-transform: rotateY(360deg) 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角度即可。

上一篇：css3边框_动力节点Java学院整理 css3图片边框border-image的用法CSS3实现内凹圆角的实例代码CSS3圆角边框和边界图片效果实例 CSS3实现多重边框的方法总结详解CSS3的box-shadow属性制作边框阴影效果的方法详解CSS的border边框属性及其在CSS3中的新特性6种非常炫酷的CSS3按钮边框动画特效深入浅析css3 border-image边框图像详解Css3圆角边框制作代码css3圆角边框和边框阴影示例

下一篇：CSS优先级计算的规则css优先级计算方法(推荐)详解CSS中的选择器优先级顺序详解CSS中的选择器优先级及样式层叠问题解决CSS z-index 层级关系优先级的概念CSS优先级的两种理解方式

您现在的位置是：网站首页> 编程资料编程资料

css3旋转木马_动力节点Java学院整理 HTML5+css3：3D旋转木马效果相册

相关内容

点击排行

本栏推荐

猜你喜欢