CSS3 3D transforms系列-3D旋转木马

来源：互联网发布：javascript是谁发明的编辑：程序博客网时间：2024/04/30 03:53

1，html结构：

<section id="container">    <div id="carousel">        <figure>1</figure>        <figure>2</figure>        <figure>3</figure>        <figure>4</figure>        <figure>5</figure>        <figure>6</figure>        <figure>7</figure>        <figure>8</figure>        <figure>9</figure>        <figure>10</figure>    </div></section>

2，css基本样式

我们给#carousel中的每一个面设置一个20像素的间隙，可以通过left:10px和top:10px来实现它。这样，每一个main的有效宽度为112px

#container{perspective: 1000px;position: relative;left:200px;top:200px;width: 200px;height: 112px;}#carousel{transform-style: preserve-3d;position: absolute;width: 200px;height: 100px; transition: all 4s;}#carousel figure{width: 200px;height: 100px;border: 2px #000 solid;opacity: 0.8;text-align: center;display: block;    font-size: 40px;color: #fff;line-height: 100px;position: absolute;top:10px;left:10px;}

3,接下来，我们要旋转每一个面，确定其位置。

#carousel中有10个面，如果整个旋转木马的面是平均分布的，那么每个面需要在上一个面的基础上多旋转36度（360 / 10）；

类似如下图所示算法：

旋转木马俯视图

旋转木马所需参数的计算公式

tan(36/2) = (112px/2) / r

tan(18) =56px/r

r= 56/tan(18)

r= 173px;

/*10张图片，所以每张图片围绕Y轴旋转36度，然后让每个figure都离中心位置173px，173这个数字是根据图片的宽度来的，具体算法是--图片宽度除以2，再除以tan(18),自己可以画张多边形研究一下*/

#carousel figure:nth-child(1){background-color: peru;transform: rotateX(0deg) translateZ(173px)}#carousel figure:nth-child(2){background-color: palegoldenrod;transform: rotateX(36deg) translateZ(173px)}#carousel figure:nth-child(3){background-color: palegreen;transform: rotateX(72deg) translateZ(173px)}#carousel figure:nth-child(4){background-color: paleturquoise;transform: rotateX(108deg) translateZ(173px)}#carousel figure:nth-child(5){background-color: palevioletred;transform: rotateX(144deg) translateZ(173px)}#carousel figure:nth-child(6){background-color: papayawhip;transform: rotateX(180deg) translateZ(173px)}#carousel figure:nth-child(7){background-color: plum;transform: rotateX(216deg) translateZ(173px)}#carousel figure:nth-child(8){background-color: powderblue;transform: rotateX(252deg) translateZ(173px)}#carousel figure:nth-child(9){background-color: deeppink;transform: rotateX(288deg) translateZ(173px)}#carousel figure:nth-child(10){background-color: deepskyblue;transform: rotateX(324deg) translateZ(173px)}

4,旋转木马效果就是让carousel围绕x轴每次旋转36度

简单实例：鼠标移动旋转

$(function(){    var i = 0;    $("#carousel").mousemove(function(){        i++;        $(this).css("transform","rotateX("+(i*36)+"deg)");    });})

x轴同理

0 0