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