CSS3 – 3D立方体

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3D立方体</title>
  <style>
    .box{
        width: 249px;
        height: 249px;
        border: 1px dashed #000;
        margin: 120px auto;
        border-radius: 250px;
        position: relative;

        /* 让子盒子保持3D效果 */
        transform-style: preserve-3d;
        
        /* 父盒子变换 */
        /* transform:rotateX(30deg) rotateY(-30deg); */
        
        /* 动画*/
        animation: gun 8s linear infinite;
    }
    /* 爱心 */
    .box::before,.box::after{
        content: "";
        width: 50px;
        height: 80px;
        background: pink;
        position: absolute;
        border-radius: 50px 50px 0 0;
        top: 50%;
        left: 50%;
    }
    .box::before{
        transform: rotate(-45deg);
        margin-left: -36px;
        margin-top: -40px;
    }
    .box::after{
        transform: rotate(45deg);       
        margin-left: -16px;
        margin-top: -40px;
    }
    
    @keyframes gun{
        0%{
            transform:rotateX(0deg) rotateY(0deg)
        }
        100%{
            transform:rotateX(360deg) rotateY(360deg)
        }
    }
    /* 选中box下面的所有div */
    .box > div{
        width: 100%;
        height: 100%;       
        text-align: center;     
        line-height: 250px;
        font-size: 60px;
        position: absolute;
        color: #fff;
    }
    /* 左盒子 */
    .left{
        background-color: rgba(255,0,0,0.3);
        transform-origin: left;
        transform: rotateY(-90deg) translateX(-125px);
    }
    /* 右盒子 */
    .right{
        background-color:rgba(0,255,0,0.3);
        transform-origin: right;
        transform: rotateY(90deg)translateX(125px);
    }
    /* 前盒子 */
    .forward{
        background-color: rgba(0,0,255,0.3);
        transform: translateZ(125px);
    }
    /* 后盒子 */
    .back{
        background-color: rgba(0,125,125,0.3);
        transform: rotateY(-180deg) translateZ(125px);
    }
    /* 上盒子 */
    .up{
        background-color: rgba(125,125,0,0.3);
        transform: rotateX(90deg) translateZ(125px);
    }
    /* 下盒子 */
    .down{
        background-color: rgba(125,125,225,0.3);
        transform: rotateX(-90deg) translateZ(125px);
    }
  </style>
 </head>
 <body>
  <div>
    <div>上</div>
    <div>下</div>
    <div>左</div>
    <div>右</div>
    <div>前</div>
    <div>后</div>
  </div>
 </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » CSS3 – 3D立方体

赞 (3)
分享到:更多 ()

发表评论 0