【CSS魔法】CSS3实现照片的3d翻转特效

UI需求

1. 初始状态显示一张人物图片
2. 鼠标悬停时可以翻转照片显示人物简介

任务分析

1. 照片想要实现翻转，就要处于一个3d空间
2. 正反两面是独立的块，设置一个为正面显示人像，另一个为背面显示人物简介
3. 鼠标悬停时，正反面互换，并有过渡效果

会使用到的一些CSS3属性

• transform-style: preserve-3d; 表示所有子元素在3D空间中呈现
• perspective: 400; 3D元素的透视效果
• transition: transform 1.5s linear; 过渡效果
• backface-visibility: hidden; 定义当元素背面向屏幕时不可见。
• transform: rotateY(180deg); 沿Y轴旋转180度

代码实现

先把DOM结构写出来

<div class="film">
  <!-- 正面 -->
  <div class="face">
    <img src="https://i.postimg.cc/RCQsrfyN/lyf1.jpg" alt="">
  </div>
  <!-- 反面 -->
  <div class="face back">
    <div class="content">
      刘亦菲，1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。2002年因出演电视剧《金粉世家》中白秀珠一角踏入演艺圈。2003年因出演武侠剧《天龙八部》中王语嫣一角崭露头角。2004年凭借仙侠剧《仙剑奇侠传》赵灵儿一角获得了高人气与关注度。
    </div>
  </div>
</div>

CSS

.film {
    position: relative;
    width: 220px;
    height: 320px;
    margin: 200px auto;
    
    transform-style: preserve-3d; /*指定所有子元素在3D空间内呈现*/
    perspective: 400; /*元素距离视图的距离*/
    transition: transform 1.5s linear; /*设置过渡效果*/
}

.face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    backface-visibility: hidden; // 元素背向屏幕时不可见
}

.back {
    transform: rotateY(180deg); // 旋转到背面
    
    background: #000;
}

.face img {
    widht: 100%;
    height: 100%;
}

.film:hover {
    transform: rotateY(180deg) scale(1.5);/*鼠标悬停时,旋转180度,将背面展示出来*/
}

.content {
    padding: 10px 20px;
    color: #fff;
    box-sizing: border-box;
}

到此，一个照片翻转特效就完成了。

效果预览

小结

是不是特别简单，CSS3的3d动画属性还有很多，可以实现很多有意思的效果。未来一起来探索吧~

亲自体验一下吧！