css 3D转换 | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css 3D转换</title>
    <style>
        #div1
        {
            position: relative; /*进行div的相对定位*/
            height: 200px;/*进行div高度的设定为200px*/
            width: 200px;/*进行div宽度的设定为200px*/
            margin: 100px;/*进行div外边距的设定，上下左右均为100px*/
            padding:10px;/*进行div内边距的设定*/
            border: 1px solid black;/*进行div边框设置，1px黑色实线*/
        }
​
        #div2
        {
            padding:50px;/*div的内边距设定为50px*/
            position: absolute;/*div绝对定位*/
            border: 1px solid black;/*边框设置为1px，黑色实线*/
            background-color: red;/*背景颜色设置为红色*/
            transform: rotateY(60deg);/*绕Y轴旋转60度*/
            transform-style: preserve-3d;/*旋转方式为3D*/
            -webkit-transform: rotateY(60deg); /* 兼容Safari and Chrome */
            -webkit-transform-style: preserve-3d; /* Safari and Chrome */
        }
​
        #div3
        {
            padding:40px;/*内边距设置为40px*/
            position: absolute;/*绝对定位*/
            border: 1px solid black;/*边框为1px黑色实线*/
            background-color: yellow;/*背景颜色为黄色*/
            transform: rotateY(-60deg);/*绕Y轴旋转*/
            -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>
HTML