css卡片,重叠div，顶部错开，底部对齐

CSS transform 属性实现的叠加长方形效果。通过设置统一的底部中心作为变换原点，并为每个长方形分配细微偏差的倾斜角度，可以完美实现你描述的"底部对齐、顶部错开"的视觉感。

核心代码

css 复制代码

transform-origin: bottom center;
transform: skewX(-8deg);

html示例

xml 复制代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>叠加长方形错开效果</title>

    <style>

        :root {

            --bg-color: #f0f2f5;

            --rect-width: 160px;

            --rect-height: 240px;

            --transition-curve: cubic-bezier(0.15, 0.8, 0.15, 1);

        }

  


        body {

            margin: 0;

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: var(--bg-color);

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

        }

  


        .stage {

            position: relative;

            width: var(--rect-width);

            height: var(--rect-height);

            /* 底部对齐容器 */

            display: flex;

            justify-content: center;

            align-items: flex-end;

        }

  


        .rect {

            position: absolute;

            bottom:0;

            width: 100%;

            height: 100%;

            border-radius: 12px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

           

            /* 核心逻辑：以底部中心为旋转/倾斜基点 */

            transform-origin: bottom center;

           

            /* 动画过渡 */

            transition: transform 0.4s var(--transition-curve),

                        filter 0.3s ease,

                        background-color 0.3s ease;

           

            display: flex;

            justify-content: center;

            align-items: center;

            font-weight: bold;

            color: white;

            font-size: 1.2rem;

            border: 2px solid rgba(255, 255, 255, 0.2);

        }

  


        /* 底部层：最左偏 */

        .rect-1 {

            top:-5px;

            background-color: red;

            transform: skewX(3deg);

            z-index: 1;

        }

  


        /* 中间层：轻微倾斜 */

        .rect-2 {

            top:-8px;

            background-color: #8b5cf6;

            transform: skewX(-3deg);

            z-index: 2;

        }

  


        /* 顶层：接近垂直 */

        .rect-3 {

            background-color: #ec4899;

            transform: skewX(0deg);

            z-index: 3;

        }

  


        /* 交互效果：鼠标悬停时展开 */

        .stage:hover .rect-1 {

            transform: skewX(-15deg) translateX(-20px);

            filter: brightness(0.9);

        }

  


        .stage:hover .rect-2 {

            transform: skewX(-5deg);

        }

  


        .stage:hover .rect-3 {

            transform: skewX(5deg) translateX(20px);

            filter: brightness(1.1);

        }

  


        .hint {

            position: absolute;

            bottom: -60px;

            color: #666;

            font-size: 0.9rem;

            text-align: center;

            width: 200px;

        }

    </style>

</head>

<body>

  


    <div class="stage">

        <div class="rect rect-1">底层</div>

        <div class="rect rect-2">中层</div>

        <div class="rect rect-3">顶层</div>

       

        <div class="hint">将鼠标悬停在长方形上查看动态错开</div>

    </div>

  


</body>

</html>