1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <title></title>
    5.         <meta charset="UTF-8">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1">
    7.         <link href="css/style.css" rel="stylesheet">
    8.         <style type="text/css">
    9.             html{
    10.                 perspective: 800px;
    11.             }
    12.             .box1{
    13.                 transform-style: preserve-3d;
    14.                 width: 200px;
    15.                 height: 200px;
    16.                 background-color: #bfa;
    17.                 margin: 100px auto;
    18.                 position: relative;
    19.                 transition: all 2s;
    20.                 animation: rollimg 10s linear infinite;
    21.             }
    22.             .box1>div{
    23.                 position: absolute;
    24.                 width: 200px;
    25.                 height: 200px;
    26.                 line-height: 200px;
    27.                 text-align: center;
    28.                 font-size: 100px;
    29.                 opacity: .5;
    30.                 transition: all 2s;
    31.             }
    32.             body:hover .box1{
    33.                 transform: rotateY(90deg);
    34.             }
    35.             @keyframes rollimg{
    36.                 from{
    37.                     transform: rotateX(0) rotateY(0);
    38.                 }
    39.                 to{
    40.                     transform: rotateX(360deg) rotateY(360deg);
    41.                 }
    42.             }
    43.             .box1>div:nth-child(1){
    44.                 background-color: yellow;
    45.                 transform: rotateY(90deg) translateZ(100px);
    46.             }
    47.             .box1>div:nth-child(2){
    48.                 background-color: orange;
    49.                 transform: rotateY(-90deg) translateZ(100px);
    50.             }
    51.             .box1>div:nth-child(3){
    52.                 background-color: red;
    53.                 transform: rotateX(90deg) translateZ(100px);
    54.             }
    55.             .box1>div:nth-child(4){
    56.                 background-color: green;
    57.                 transform: rotateX(-90deg) translateZ(100px);
    58.             }
    59.             .box1>div:nth-child(5){
    60.                 background-color: green;
    61.                 transform: rotateX(0) translateZ(100px);
    62.             }
    63.             .box1>div:nth-child(6){
    64.                 background-color: darkorange;
    65.                 transform: rotateX(180deg) translateZ(100px);
    66.             }
    67.         </style>
    68.     </head>
    69.     <body>
    70.         <div class="box1">
    71.             <div>1</div>
    72.             <div>2</div>
    73.             <div>3</div>
    74.             <div>4</div>
    75.             <div>5</div>
    76.             <div>6</div>
    77.         </div>
    78.     </body>
    79. </html>