css transform-style 实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css transform-style 实例 - 自学教程(runoops.com)</title>
    <style>
        #div1 {
            position: relative;
            height: 200px;
            width: 200px;
            margin: 100px;
            padding: 10px;
            border: 1px solid black;
        }

#div2 {
            padding: 50px;
            position: absolute;
            border: 1px solid black;
            background-color: red;
            transform: rotateY(60deg);
            transform-style: preserve-3d;
            -webkit-transform: rotateY(60deg);
            /* Safari and Chrome */
            -webkit-transform-style: preserve-3d;
            /* Safari and Chrome */
        }

#div3 {
            padding: 40px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            transform: rotateY(-60deg);
            -webkit-transform: rotateY(-60deg);
            /* Safari and Chrome */

}
    </style>
</head>

<body>

<div id="div1">
        <div id="div2">HELLO
            <div id="div3">YELLOW</div>
        </div>
    </div>

</body>

</html>