HTML5+css3:3d旋转木马效果相册

这个博客的目的是因为上次的HTML5，CSS3是一个有趣的例子。There is a more important knowledge about the effect of CSS 3D in Baidu 3D, which is perspective and tranlateY, which is an example of 3D's flop.

效果图：嘿嘿，我拍了一些大学毕业照，做了一个旋转木马，围绕着我的大文科，并没有忘记母校的熏陶。
1、透视

透视属性由两个属性组成：无属性和单位长度值。

的透视属性的默认值是None，表示看3D对象的一个无限的角度，但它看起来平坦。另一个值接受价值超过0个单位长度，单位不能百分之一的比例。值越大，越远的角度出现，从而创造一个较低的强度和很小的空间变化。另一方面，值越小，越接近角似乎创建一个高强度的角度和一个大型的三维变化。在一个简单的方法，当角度设置长度，3D效果越小，你的眼睛会更明显，越接近对3D对象，反之亦然。

2、变换：translatez（长度）

假设当视角：300px设置较小的translatez值，的子元素的尺寸较小。当设定值接近300px，似乎在300px这个元素是无形的。

上述核心：

1、首先，所有容器的位置：绝对的堆叠在一起，然后rotatey 40 *我，我= 0, 1, 2…9，所有图像将相交成一个花状。

2，然后设置translatez每张图片的容器，和所有的图片都将从相应的角度，拓展成一个大圆圈，即图像的影响。

Html：


/ /警报（64 / math.tan（20 / 180 *数学。PI））；
函数（元素、值、键）
{
关键=变换关键| | ；
{MOZ
{
样式{前缀+键} =值；
}）；

返回的元素；
}
（$函数）
{
var = 40，i＝1；
$（#容器）。Click（function（））
{
变换（$（this）{ 0 }，rotatey（+（°*我+ +）+°））
}）；
}）；
一次只做一件事，做好…
一次只做一件事，做好…
坚持，永不放弃。
凡是值得做的事就值得做好。
相信自己。
行动胜于雄辩。
永远不要把今天能做的事拖到明天。
杰克，精通一切，精通一切。
不从外表判断。
CSS：

锂
{
宽度：128px；
盒子的影子：0 1px 3px RGBA（0, 0, 0。5）；
位置：绝对；
底部：0；
}

李IMG
{
宽度：128px；
盒子的影子：0 1px 3px RGBA（0, 0, 0。5）；
垂直对齐：中间；
}

李跨
{
显示块；
宽度：128px；
文本对齐：中心；
颜色：# 333；
字体大小：8px；
}

#阶段
{

宽度：900px；
最小高度：100px；
左缘：自动；
保证金：汽车；
填料：100px 50px；
WebKit的视角：1200px；
职位：相对；
}

#容器
{
背景：URL（IMG / xawl .webp）没有重复00；
边距：200px；
宽度：128px；
盒子的影子：0 1px 3px RGBA（0, 0, 0。5）；
身高：100px；
margin-left: - 64px；
WebKit的过渡：WebKit的变换1s；
转换：转换1；
WebKit的变换风格：preserve-3d；
位置：绝对；
左：50%；
}

李：第N个孩子（0）
{
WebKit的变换：rotatey（0度）translatez（300px）；
}

李：第N个孩子（1）
{
WebKit的变换：rotatey（40deg）translatez（300px）；
}

李：第N个孩子（2）
{
WebKit的变换：rotatey（80deg）translatez（300px）；
}

李：第N个孩子（3）
{
WebKit的变换：rotatey（120deg）translatez（300px）；
}

李：第N个孩子（4）
{
WebKit的变换：rotatey（160deg）translatez（300px）；
}

李：第N个孩子（5）
{
WebKit的变换：rotatey（200℃）translatez（300px）；
}

李：第N个孩子（6）
{
WebKit的变换：rotatey（240deg）translatez（300px）；
}

李：第N个孩子（7）
{
WebKit的变换：rotatey（280deg）translatez（300px）；
}

李：第N个孩子（8）
{
WebKit的变换：rotatey（320deg）translatez（300px）；
}

李：第N个孩子（9）
{
WebKit的变换：rotatey（360deg）translatez（300px）；
}
DIV #阶段为舞台，集来看，每集rotatey div容器里，#和translatez；然后我们将成立的WebKit的变换风格：preserve-3d变换风格：平preserve-3d |；平值是默认值，表示所有子元素在2D plane.preserve-3d目前表明所有的子元素都在三维空间。如果一个值的变换样式设置为preserve-3d为一个元素，它表明，不进行扁平化运作，和他所有的子元素都是在三维空间中。总的来说，这个属性是用于三维动画的效果，这是执行元件，它是将三维动画效果，所以它的子元素都应该在三维空间。

有一点要注意：这个例子实际上是动画是一个鼠标点击div容器，#行为改变rotatey div容器，在#所有图像元素，并已被证明是旋转木马的效果，现在要做的是把马，只需要#容器div rotatey 40角的每次变化。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。