相關(guān)屬性：
1./* transform-style: flat(2D) preserve-3d(3D)*/
?/* 在父元素中添加 transform-style來啟用3D空間 */
2.transform屬性眠砾，旋轉(zhuǎn)（rotate）呐赡、平移（translate）
父元素樣式：
子元素樣式：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>Document</title>
? <style>
? ? body{
? ? ? margin: 0;
? ? ? padding: 200px;
? ? ? background-image: url(../images/grid.png);
? ? }
? ? .box{
? ? ? position: relative;
? ? ? width: 100px;
? ? ? height: 100px;
? ? ? background-color: red;
? ? ? /* transform-style: flat(2D) preserve-3d(3D)*/
? ? ? /* 在父元素中添加 transform-style來啟用3D空間 */
? ? ? transform-style: preserve-3d;
? ? ? transform: rotateX(-33.5deg) rotateY(45deg);
? ? }
? ? .item{
? ? ? position: absolute;
? ? ? top: 0;
? ? ? left: 0;
? ? ? width: 100%;
? ? ? height: 100%;
? ? }
? ? .top {
? ? ? background-color: rgb(212, 163, 163,0.4);
? ? ? transform: rotateX(90deg) translateZ(50px);
? ? }
? ? .bottom {
? ? ? background-color:rgb(136, 248, 211,0.4);
? ? ? transform: rotateX(-90deg) translateZ(50px);
? ? }
? ? .left {
? ? ? background-color:rgba(199, 158, 231, 0.4);
? ? ? transform: rotateY(-90deg) translateZ(50px);
? ? }
? ? .right {
? ? ? background-color:rgba(231, 158, 192, 0.4);
? ? ? transform: rotateY(90deg) translateZ(50px);
? ? }
? ? .front {
? ? ? background-color:rgba(121, 111, 218, 0.651);
? ? ? transform: translateZ(50px);
? ? }
? ? .back {
? ? ? background-color:rgba(111, 218, 134, 0.651);
? ? ? transform: translateZ(-50px);
? ? }
? </style>
</head>
<body>
? <!-- 父元素 -->
? <div class="box">div11111111
? ? <!-- 子元素 -->
? ? <div class="item left">5</div>
? ? <div class="item right">6</div>
? ? <div class="item top">1</div>
? ? <div class="item bottom">2</div>
? ? <div class="item front">3</div>
? ? <div class="item back">4</div>
? ? <!--
? ?-->
? </div>
</body>
</html>
