层叠阴影卡片

  1. <!--
  2. * @Author: hhn
  3. * @Date: 2020-09-01 15:14:35
  4. * @lastEditTime: Do not edit
  5. * @Description: In User Settings Edit
  6. * @FilePath: \codehub\study\studied\html\cascade.html
  7. -->
  8. <!DOCTYPE html>
  9. <html lang="en">
  11.   <head>
  12.     <meta charset="utf-8">
  13.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14.     <meta name="divport" content="width=device-width, initial-scale=1">
  15.     <title>层叠阴影卡片</title>
  17.     <style>
  18.       .cascade {
  19.         position: relative;
  20.         z-index: 10;
  21.         min-height: 200px;
  22.         box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
  23.         z-index: 10;
  24.         background: #fff;
  25.       }
  27.       .cascade div {
  28.         border-radius: 8px;
  29.         box-shadow: inherit;
  30.         background: inherit;
  31.         position: absolute;
  32.       }
  34.       .cascade div:nth-child(1) {
  35.         width: 100%;
  36.         height: 100%;
  37.         z-index: 11;
  38.         bottom: 0;
  39.         left: 0;
  40.         background: inherit;
  41.       }
  43.       .cascade div:nth-child(2) {
  44.         width: calc(100% - 20px);
  45.         height: 30px;
  46.         bottom: -15px;
  47.         left: 10px;
  48.         z-index: 9;
  49.       }
  51.       .cascade div:nth-child(3) {
  52.         width: calc(100% - 40px);
  53.         height: 30px;
  54.         bottom: -30px;
  55.         left: 20px;
  56.         z-index: 8;
  57.       }
  59.       .cascade div:nth-child(4) {
  60.         width: calc(100% - 60px);
  61.         height: 30px;
  62.         bottom: -45px;
  63.         left: 30px;
  64.         z-index: 7;
  65.       }
  66.     </style>
  67.   </head>
  69.   <body>
  71.     <div class="cascade">
  72.       <div>555</div>
  73.       <div></div>
  74.       <div></div>
  75.       <div></div>
  76.     </div>
  77.   </body>
  79. </html>

image.png

卡片翻转

主要利用的CSS3的perspective结合transform:ratateY()属性完成。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。需要注意的是：perspective 属性只影响 3D 转换元素。

实现思路就是将两个要展示的div利用定位重叠在一起，其中一个首先围绕Y轴旋转一定角度，还要加上一个关键属性backface-visibility:hidden (该属性定义当元素不面向屏幕时是否可见）。如果不加上这个属性的话，那么就会始终只能看到一张卡片了。
点击查看【juejin】