用html5和css写一个立体样式案例

以下是一个简单的立体样式案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立体样式</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            position: relative;
            perspective: 800px;
        }

        .box-inner {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }

        .box-front,
        .box-back {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #fff;
            transform: translateZ(100px);
        }

        .box-front {
            transform: translateZ(-100px);
        }

        .box:hover .box-inner {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box-inner">
        <div class="box-front"></div>
        <div class="box-back"></div>
    </div>
</div>
</body>
</html>

解释：

用一个 div 元素来表示立方体，设置它的宽高为 200px，背景颜色为灰色，相对定位，设置 perspective 属性为 800px，表示透视效果的距离。
再用一个 div 元素来表示立方体的内部，设置它的宽高为 100%，绝对定位，使用 transform-style 属性设置为 preserve-3d，表示该元素的子元素也需要应用 3D 变换。
在内部元素中，添加两个 div 元素，分别表示立方体的前面和后面。它们的宽高为 100%，绝对定位，背景颜色为白色，使用 translateZ 属性将它们分别放在立方体的前面和后面。
当鼠标悬停在立方体上时，通过给内部元素添加 rotateY 变换，将立方体沿着 Y 轴旋转 180 度，从而呈现出立体效果。这个效果是通过 CSS3 的过渡动画来实现的。