h1{
color: green;
font-family: monospace;
}
.box{
                position: fixed;
                    top: -180px;
    right: 100px;
                 /* 景深 */
                perspective: 1000px;
                opacity: 0.8;
            }
            #cube {
                /* 相对定位 */
                position: relative;
                left: 0;
                top: 0;
                width: 100px;
                height: 100px;
                /* 设置旋转元素的基点位置 */
                transform-origin: 50% 50% -100px;
                /*设置3D的环境*/
                transform-style: preserve-3d;
                /* 规定完成过渡效果需要多少秒或毫秒 */
                transition: 2s;
                /* 旋转元素 */
                transform: translateX(60px) translateY(300px) translateZ(40px);
            }
            #cube>div{
                width:100px;
                height:100px;
                /* 相对定位 */
                position:absolute;
                /* 背景颜色 */
                background:rgba(51,51,51,.3);
                /* 过渡渐变属性 */
                transition: transform 0.3s ease-in;
            }
            #cube div.out-front{
                /* 对元素进行旋转、缩放、移动或倾斜 */
                transform:translateZ(50px);
            }
            #cube div.out-back{
                transform:translateZ(-50px) rotateY(180deg);
            }
            #cube div.out-left{
                transform:translateX(-50px) rotateY(-90deg);
            }
            #cube div.out-right{
                transform:translateX(50px) rotateY(90deg);
            }
            #cube div.out-top{
                transform:translateY(-50px) rotateX(90deg);
            }
            #cube div.out-bottom{
                transform:translateY(50px) rotateX(-90deg);
            }

            #heard {
                position: relative;
                width: 300px;
                height: 600px;
                margin: 100px auto;
                transform-style: preserve-3d;
                transform: rotateX(20deg) rotateY(0deg) rotateZ(50deg);
                /* transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); */
                /* 动画运动 */
                animation: rot 20s infinite linear;
            }
            /* 帧动画配合 animation使用 */
            @keyframes rot {
                0% {
                    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)
                }
                100% {
                    transform: rotateY(720deg) rotateX(360deg) rotate(360deg)
                }
            }

            #heard div.heard {
                position: absolute;
                left: 0;
                top: 0;
                width: 125px;
                height: 300px;
                /*border: 2px solid red;*/
                border-left: 0;
                border-bottom: 0;
                /* border-radius：左上 右上 右下 左下 */
                border-radius: 50% 50% 0 /40% 50% 0;
            }

            #cube img {
                width: 100px;
                height: 100px;
            }