520 抖音哄女友图片动画+详细讲解

效果的实现其实只依赖CSS3的"3D转换"，“动画"和"过渡”

1. css部分

.container{
    width:800px;
    height:600px;
    margin:200px auto;
}

.box{
    width: 400px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    transition: all 8s;
    transform-style: preserve-3d;
    animation: move 8s infinite linear alternate;
}

.box>div{
    width: 400px;
    height: 400px;
    opacity: 0.8;
    position: absolute;
    top: 0;left: 0;
    transition: all 1s;
}
		
.box img{
    width: 400px;
    height: 400px;
}
		
.left{transform: rotateY(90deg) translateZ(-200px);}
.right{transform: rotateY(90deg) translateZ(200px);}
.top{transform: rotateX(90deg) translateZ(200px);}
.bottom{transform: rotateX(90deg) translateZ(-200px);}
.font{transform: translateZ(200px);}
.behind{transform: translateZ(-200px);}

		
.box:hover .left{transform: rotateY(90deg) translateZ(-250px);}
.box:hover .right{transform: rotateY(90deg) translateZ(250px);}
.box:hover .top{transform: rotateX(90deg) translateZ(250px);}
.box:hover .bottom{transform: rotateX(90deg) translateZ(-250px);}
.box:hover .behind{transform: translateZ(-250px);} 
.box:hover .font{transform: translateZ(250px);}

@keyframes move{
    from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(13deg) rotateY(720deg);}
}

2.HTML5

<div class="container">
    <div class="box">
        <div class="left"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTY5I_M0jKX2s6MKDofX7GYERG1nI3cswwxK_r5jHL37L1_X2a&usqp=CAU"></div>
        <div class="right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSzibz8KOuKd3X0DaS826tYqI-xJMS_WR43E9gzWfZO_IAjeKdB&usqp=CAU"></div>
        <div class="top"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQHoF63jZERlPKYv45wS2mkGMTOYUgBW3jWWz_1dpZxzQ3lRxak&usqp=CAU"></div>
        <div class="bottom"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSTa7y2P-jbupq0Xkn6o7KrvrzAzlgVeVEGpkdy9r_dknLV3Iwe&usqp=CAU"></div>
        <div class="font"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTWwJDq4tH57gvsHreN0okHTiYibawAgJEEJuKyx1-Wqzd13wdy&usqp=CAU"></div>
        <div class="behind"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRRa1UpLT43QaMbM0-boABR8VdVI1cffpUf92HUicAqZQV6aO8X&usqp=CAU"></div>
    </div>
</div>

3.效果图

4.css讲解

transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等
1.旋转

1.rotateX(angle):围绕其在一个给定度数X轴旋转元素
2.rotateY(angle):围绕其在一个给定度数Y轴旋转元素
3.rotateZ(angle):围绕其在一个给定度数Z轴旋转元素
4.rotate(angle):在一个给定度数顺时针旋转的元素，允许是负值
5.rotate3d(x,y,z,angle):定义3d旋转
#div{   
  width:300px;   
  height:200px;  
  background-color: yellow; 
  transform: rotateX(180deg);
    }

2.移动

1.translateX(x):向给定的X轴方向平移
2.translateY(y):向给定的Y轴方向平移
3.translateZ(z):向给定的Z轴方向平移
4，translate(x,y):从当前位置移动
5.translate3d(x,y,z):定义3D转化

3.缩放

1.scaleX(x):定义X轴缩放转换
2.scaleX(y):定义y轴缩放转换
3.scaleX(z):定义z轴缩放转换
4.scale(number,number):(宽，高）当数字大于1时放大，小于1时缩小
5.scale(x,y,z):定义3D缩放转换

4.倾斜

1.skew(angle,angle)
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
2.skewX(x-angle)
3.skewY(y-angle)

5.属性：

transform-style:指定嵌套元素是怎样在三纬空间呈现的。
1.flat:子元素将不保留其3d位置
2.preserve-3d:子元素将保留其3d位置
注意：该属性对元素本身没有影响，受影响的是嵌套在它里面的子元素，假设该元素本身向y轴旋转50deg，若为preserve-3d，则子元素也旋转50deg。这就非常符合我们本例的图片旋转了，因为<img>是嵌套在<div>中的子元素，所以div的transfrom如何，img也得如何。transform-style属性的使用前提是使用了transfrom.

6.过渡：运用于添加某种效果可以从一种样式转化到另一种样式的时候，本例则用到了"鼠标滑过"的效果转换样式

要实现这一点满足的条件：
1.指定要添加的CSS样式
2.指定效果的持续时间(如果没有指定，则没有任何效果。因为默认值为0)

过渡属性：
transition:简写属性，用于在一个属性中设置四个过渡属性
1.transition-property:all(所有属性)|none|property(将需要改的写出，用逗号隔开，例：width,height)规定应用过渡的CSS属性名称。
2.transition-duration:定义过渡效果花费的时间。默认为0。
3.transition-timing-function:line(匀速)|ease(逐渐加快)规定过渡效果的时间曲线。
4.transition-delay:规定过渡效果何时开始。默认是0.

7.动画：@keyframes规则是创建动画

当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少两个Css3的动画属性绑定一个选择器：
1.规定动画名称
2.规定动画时长
你可以指定多个样式，运用from---to,或者利用百分比来规定每个样式的时间
例：@keyframes move//move为该动画名称
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

动画属性：
animation:简写属性，除了animation-state
1.animation-name:动画名称
2.animation-duration:动画运行时间
3.animation-timing-function:
4.animation-delay:
5.animation-iteration-count:n|infinite(无限)动画运行次数，默认是1。
6.animation-direction:normal(正常播放)|reverse(反向播放)|alternate(奇数次正向，偶数次反向)|alternate-reverse(奇数次反向，偶数次正向)动画运行方向，结束后再次运行的方向。
7.animation-state:动画运行状态。