1.透视:perspective
**
电脑显示屏是一个 2D 平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。但仅仅只是视觉呈现出3d 效果,并不是正真的3d。
格式有两种写法:
作为一个属性,设置给父元素,作用于所有3D转换的子元素
作为 transform 属性的一个值,做用于元素自身。**
3D呈现(transform-style)
3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下
定义动画的步骤
(1)通过@keyframes定义动画;
(2)将这段动画通过百分比,分割成多个节点;然后各节点中分别定义各属性;
(3)在指定元素里,通过 animation 属性调用动画。
(4)animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
我们来看看能够无限旋转的效果
第一步基础结构
第二部实现图片基础样式
第三部实现3D效果
第四部让图片自动旋转
1.实现基础结构
<div class="box">
<ul>
<li><img src="./images/01.png" alt=""></li>
<li><img src="./images/02.jpg" alt=""></li>
<li><img src="./images/03.png" alt=""></li>
<li><img src="./images/04.png" alt=""></li>
<li><img src="./images/07.png" alt=""></li>
<li><img src="./images/u=2446730486,2843148982&fm=26&gp=0.jpg" alt=""></li>
</ul>
</div>
下一步要让图片聚集在一起让他居中
2.实现基础样式让它居住聚集在一起
-
{
margin: 0;
padding: 0;
}.box { width: 400px; height: 300px; margin: 150px auto; /* 上下150px 左右居中 */ } ul { list-style: none; /* 清除小圆点 */ /* 用子绝父相定位让图片聚集在一起 */ position: relative; } li { position: absolute; } img { /* 图片大小不一样那么设置每一张图片一样大 */ width: 400px; height: 300px; }
3.让每一张图片看起来像有距离感
用伪元素把每一张图片调整:
下面的图片
4.让图片自动旋转
看看最终的效果:
这是效果的全部代码:
<!DOCTYPE html>
<style>
* {
margin: 0;
padding: 0;
}
body {
perspective: 800px;
}
/* 用 @keyframes让图片动起来 */
@keyframes go {
0% {
transform: rotateY(0deg)
}
100% {
transform: rotateY(360deg)
}
}
.box {
width: 400px;
height: 300px;
margin: 150px auto;
/* 上下150px 左右居中 */
transform-style: preserve-3d;
/* 用transform-style: preserve-3d;转化成3D效果 */
animation: go 3s linear infinite;
/* 让图片3秒转一圈 infinite无限的意思让图片无限次数转圈 */
}
ul {
height: 300px;
list-style: none;
/* 清除小圆点 */
/* 用子绝父相定位让图片聚集在一起 */
position: relative;
}
li {
position: absolute;
}
img {
/* 图片大小不一样那么设置每一张图片一样大 */
width: 400px;
height: 300px;
}
ul li:nth-of-type(1) img {
transform: rotateY(60deg) translateZ(400px);
}
.box ul li:nth-of-type(2) img {
transform: rotateY(120deg) translateZ(400px);
}
.box ul li:nth-of-type(3) img {
transform: rotateY(180deg) translateZ(400px);
}
.box ul li:nth-of-type(4) img {
transform: rotateY(240deg) translateZ(400px);
}
.box ul li:nth-of-type(5) img {
transform: rotateY(300deg) translateZ(400px);
}
.box ul li:nth-of-type(6) img {
transform: rotateY(360deg) translateZ(400px);
}
</style>
<div class="box">
<ul>
<li><img src="./images/01.png" alt=""></li>
<li><img src="./images/02.jpg" alt=""></li>
<li><img src="./images/03.png" alt=""></li>
<li><img src="./images/04.png" alt=""></li>
<li><img src="./images/07.png" alt=""></li>
<li><img src="./images/u=2446730486,2843148982&fm=26&gp=0.jpg" alt=""></li>
</ul>
</div>