transform的3D效果实现

一：立方体及其旋转效果

原理：构建一个立方体，四方体共有六个面，采用定位及其位移旋转实现。

<div class="rect-wrap">  
    <div class="container">    
      <div class="top slide"><img src="images/17.jpg" title="上面" alt="上面"/></div>
        <div class="bottom slide"><img src="images/18.jpg" title="下面" alt="下面"/></div>
        <div class="left slide"><img src="images/19.jpg" title="左面" alt="左面"/></div>
        <div class="right slide"><img src="images/20.jpg" title="右面" alt="右面"/></div>
        <div class="front slide"><img src="images/21.jpg" title="前面" alt="前面"/></div>
        <div class="back slide"><img src="images/24.jpg" title="后面" alt="后面"/></div>
    </div>

</div>

css样式：

.rect-wrap {
    position: relative;
    perspective: 1600px;
}
/*容器*/
.container {
    width: 800px;
    height: 800px;
    transform-style: preserve-3d;
    /*设置3d空间的原点在平面中心再向Z轴移动200px的位置*/
    transform-origin: 50% 50% 200px; 
    margin: auto;
}
/*立方体的每个面*/
.slide {
    width: 400px;
    height: 400px;
     /*定位,使其六个面折叠在一起*/
    position: absolute;
    left: 200px;
    top: 100px;
}
.slide img{
width: 100%;
height: 100%;

}

        实现方法，六个面重叠，以前面的一个面为准，向前移动200px，向后沿着Z轴移动200px构建前后面；左右各沿着Y轴旋转90度，前后沿着Z移动200px构建左右面；上下各沿着X轴旋转90度，上下沿Z轴移动200px构建上下面。构造四方体成功。

/*前面*/
.front{
background: green;
transform: translateZ(200px);
}
/*后面*/
.back{
background: blue;
transform: translateZ(-200px);
}
/*左面*/
.left{
background: red;
transform: rotateY(90deg) translateZ(-200px);
}
/*右面*/
.right{
background: purple;
transform: rotateY(90deg) translateZ(200px);
}
/*上面*/
.top{
background: black;
transform: rotateX(90deg) translateZ(200px);
}
/*下面*/
.bottom{
background: orange;
transform: rotateX(90deg) translateZ(-200px);

}

如果使四方体旋转可以在包含面的容器内加动画效果使其自动转动。

知识点

知识点	说明
perspective	3D元素距离视图的距离，以像素计，其子元素会获得透视效果而不是元素本身，只影响3D元素效果（近大远小）
transform-style	指定元素在3D空间中的呈现，flat指所有子元素在2D平面上呈现，preserve-3d指所有子元素在3D空间上呈现
transform-origin	允许转换被改变元素的位置，必须和transform属性一同使用
transform	向元素应用2D或3D转换，允许对元素进行缩放、移动、旋转、倾斜

@keyframes	用于创建动画，规定某项css的样式，创建由当前样式转换为新样式的动画效果，必须规定动画名称和动画时长
animation

二：旋转木马

<section class="container">
 <div id="carousel">
   <figure><img src="images/17.jpg"/></figure>
   <figure><img src="images/18.jpg"/></figure>
   <figure><img src="images/19.jpg"/></figure>
   <figure><img src="images/20.jpg"/></figure>
   <figure><img src="images/21.jpg"/></figure>
   <figure><img src="images/22.jpg"/></figure>
   <figure><img src="images/23.jpg"/></figure>
   <figure><img src="images/24.jpg"/></figure>
   <figure><img src="images/25.jpg"/></figure>
 </div>
</section> 

    基本结构和立方体的构造一致

            难点：如何确定旋转的圆心，旋转中心，（借鉴）各位大神的。将此图看做为一个平面，则各条虚线交汇点即为旋转的中心。根据个数计算每张图之间的旋转角度，即为360deg/个数；计算Z住距离旋转中心距离，即为tan（度数/2）=规定图边长的一半/r。

.container {
 width: 210px;
 height: 140px;
 position: relative;
 perspective: 3000px;
 perspective-origin: 50%;
 margin: auto;
}
#carousel {
 width: 100%;
 height: 100%;
 position: absolute;
 transform-style: preserve-3d;
 transition: 1s;
}
 
#carousel figure {
 display: block;
 position: absolute;
 width: 186px;
 height: 116px;
 border: 2px solid black;
 text-align: center;
 line-height: 116px;
 font-size: 40px;
}
#carousel figure img{
width: 100%;
height: 100%;
}
#carousel figure:nth-child(1) { transform: rotateY( 0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY(40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY(80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY(120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY(160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY(200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY(240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY(280deg ) translateZ( 288px ); }

#carousel figure:nth-child(9) { transform: rotateY(320deg ) translateZ( 288px ); }          

给定计时器使其自动旋转

let degG=0;
function timer(){
degG -= 40;
$("#carousel").css({transform: "translateZ(-288px )  rotateY( "+degG+"deg )"});
}

setInterval(timer,2000); 

参考地址： https://github.com/yijianchuanxinwq/transform3D.git