一、旋转木马相册的魅力
试着想想看，电脑屏幕正播放一堆美图，跟旋转木马似的慢慢动，有没有觉得特神奇呀？这就是咱们今天要用H5和C3做出来的旋转木马相册，既好看又有那种童话世界的感觉。每次一看到这个效果，我都在想，要是能把小时候那些美好梦想都记录下来该多棒！
二、准备工作：理解perspective属性
动手前，咱得认识下CSS里的perspexity属性。这货就像是你和电脑屏幕间的距离一样，离得近效果就明显，反之则比较平淡。调整好perspexity的大小，才能让咱们的旋转木马画面更真实！
三、构建基础：position和rotateY的应用
接下来，咱们得让那些图片容器都能立起来，这时候要用到position:absolute这个东西。然后，用rotateY属性让每张图都按一定角度排好队，这样就能搞定基本布局。你可以想象一下，这些图片就像被一股神秘力量拉到了一个看不见的圆环上，等着被转起来。
四、深入细节：translateZ的作用
想让图片动起来，还能从眼前飘出来？没问题！我们需要用上translateZ属性。这个属性就像一把神奇的尺子，控制图片往前或者往后挪多远，这样才能有立体感。只要调好了它，你的图片就活生生地出现在你眼前，仿佛能摸到似的！
五、动画的核心：transform-style的设置
要让每张图在3D空间里正常展示，别忘了设好transform-style属性！选上preserve-3d，就能保证所有子元素还在3D空间里，这样转起来才会有逼真的透视感。这就像给每张图披上了一个会随风摆动的神奇斗篷！
nbsp;html>// 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)") }); });
六、互动的魔力：鼠标点击的动画
高潮部分来！轻轻点下鼠标，整个旋转木马都能转起来！每次一点，p#container里的rotateY数值就变了，所有图片跟着一起转。这时候，你会觉得自己就是游乐场的大佬，享受着无尽的欢乐。
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);
}
七、实战演练：一步步打造你的旋转木马
现在，咱们得把这些理论变成现实！想像一下，你正在一点点地输入代码，每敲完一行，屏幕上的画面都会变得更有趣。这个从零开始的创作过程，真的很有意思。
八、分享你的作品：让世界看到你的创意
搞定了自己的旋转木马相册后，为啥不给别人看看？嗮在社交平台上或者个人网页上都行，好东西要和大家分享！被称赞时不仅开心，还有动力继续创作。
九、持续学习与创新
别以为我们只做完了旋转木马相册！技术和创新可是无边无际的。多多学习，勇敢尝试新鲜玩意儿，你会发现，每次尝试都是一场未知的冒险，说不定就能收获大惊喜~
评论0