CSS3实现图片翻转动画

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

在实际开发中遇到一个当鼠标移动至图片上时图片进行翻转的需求，下面将介绍利用Html+CSS3实现的方法。

在讲述方法前需要先简单理解CSS3实现动画的关键知识点：transform 和 transition

transform

定义：是向元素应用2D或3D转换，允许我们对元素进行旋转、缩放、移动或倾斜。

1. 旋转：transform：rotate(deg);令元素朝某个方向进行旋转，其中deg就是旋转角度，正值为顺时针，负值为逆时针；
2. 缩放：transform：scale(x,y);令元素在X轴Y轴进行缩放，其中x是水平方向的值，y是垂直方向的值；
3. 移动：transform：translate(x,y);令元素在水平方向和垂直方向进行平行移动，其中x是水平方向的值，y是垂直方向的值；
4. 倾斜：transform：skew(deg,deg);令元素往某个方向进行倾斜，其中第一个参数是X轴方向，第二个参数是Y轴方向，deg即是倾斜的角度，正值是向左，负值是向右。

transition

定义：当元素从一种样式变换成另一种样式时为元素添加的过渡效果。

以“百度钱包”的一个动画效果作为例子

Html内容

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

核心思路是：

• 在一个盒子box中包含两个子盒子box1和box2，初始样式是box1和box2分别使用正、反面的图片作为背景图（需要注意的是作为例子的图片是一张精灵图，所以在背景图设置会有所不同，实际背景效果要看实际图片样式决定）；
• 然后box1初始是0deg，box2是-180deg；
• 通过定位让两个都处于box的同一位置（目的是在静止时只显示其中一个盒子）；
• 最后设置当鼠标移动到box上时让box1和box2旋转180deg，即是box1从0deg到-180deg，box2从-180deg到0deg。

CSS内容

.box{
    width: 300px;
    height: 300px;
    position: relative;/注意：如果不设置定位，子元素的定位将无法实现/
    margin: 100px auto;
}
.box1,.box2{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
    background: url("./image/baidu.png") no-repeat left bottom;
    backface-visibility: hidden;/*当元素为反面的时候设置为不可见*/
    transition: all 1s;/*过渡效果*/
}
.box1{
    z-index: 2;
}
.box2{
    background-position: -305px bottom;
    transform: rotateY(-180deg);
}
.box:hover .box1{
    transform: rotateY(-180deg);
}
.box:hover .box2{
    transform: rotateY(0deg);
}

显示效果