立方体动画_Java

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        html{
            perspective: 800px;
        }
        .box1{
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            /**/
            margin: 100px auto;
            position: relative;
            transition: all 10s ;

            animation: roImg 4s linear infinite;
        }

        .box1>div{
            position: absolute;
            width: 200px;
            height: 200px;
            line-height:200px;
            font-size: 100px;
            text-align: center;
            opacity: .5;
            transition: all 2s;
        }

        /*.box1:hover {*/
            /*transform: rotateY(90deg);*/
        /*}*/

        @keyframes roImg {
            from{
                transform: rotateX(0) rotateY(0);
            }

            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }



        .box1>div:nth-child(1){
            font-weight:bold;">yellow;
            transform: rotateY(90deg) translateZ(100px);
        }

        .box1>div:nth-child(2){
            font-weight:bold;">orange;
            transform: rotateY(-90deg) translateZ(100px);
        }

        .box1>div:nth-child(3){
            font-weight:bold;">red;
            transform: rotateX(90deg) translateZ(100px);
        }

        .box1>div:nth-child(4){
            font-weight:bold;">skyblue;
            transform: rotateX(-90deg) translateZ(100px);
        }

        .box1>div:nth-child(5){
            font-weight:bold;">yellowgreen;
            transform: rotateX(0deg) translateZ(100px);
        }
        .box1>div:nth-child(6){
            font-weight:bold;">chocolate;
            transform: rotateX(180deg) translateZ(100px);
        }


    </style>
</head>
<body>

<div class="box1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>


</body>
</html>