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

最新推荐文章于 2024-11-14 10:28:14 发布

原创

最新推荐文章于 2024-11-14 10:28:14 发布 · 2.2k 阅读

标签

#css3 #css #3d

收录于

准备两张图片，尺寸一样大，本代码中是绕 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