CSS3实现图片的3D旋转效果

最新推荐文章于 2024-05-06 15:22:28 发布

上官海岚

最新推荐文章于 2024-05-06 15:22:28 发布

阅读量1.8k

点赞数 3

分类专栏： HTML + CSS 文章标签： css3 css 3d

本文链接：https://blog.csdn.net/weixin_44566194/article/details/129482957

版权

HTML + CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

准备两张图片，尺寸一样大，本代码中是绕 Y 轴进行旋转（也可以改为 X 轴）。

先看看效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 最外层盒子设置 */
      .box {
        position: relative;
        width: 500px;
        height: 278px;
        margin: 100px auto;
        perspective: 1500px;
      }

      /* 盒子内的所有图片进行定位，背面不可见，背面隐藏起来 */
      .box img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }
      /* 第二张图片反过来是正的，要提前把后面的的图片翻转180度 */
      .box img:nth-of-type(2) {
        transform: rotateX(-180deg);
      }
      /* 设置过渡效果 */
      .box img {
        transition: all 1s;
      }

      /* 鼠标移动到图片时，前面的图片翻转180度，后面的图片翻转回0度 */
      .box:hover img:nth-of-type(1) {
        transform: rotateX(180deg);
      }
      .box:hover img:nth-of-type(2) {
        transform: rotateX(0deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./img/bg1.jpg" />
      <img src="./img/bg2.jpg" />
    </div>
  </body>
</html>