1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1">
    6.         <title></title>
    7.         <style type="text/css">
    8.             .box1{
    9.                 width: 200px;
    10.                 height: 200px;
    11.                 background-color: #bfa;
    12.                 margin: 100px auto;
    13.                 transition: all 2s;
    14.                 position: relative;
    15.             }
    16.             .box1:hover{
    17.                 transform: rotateZ(180deg);
    18.             }
    19.             .box1 .inner{
    20.                 position: absolute;
    21.                 transition: all 2s;
    22.                 transform-origin: left top;
    23.             }
    24.             .box1:hover .inner:nth-child(1){
    25.                 transform: rotateZ(360deg);
    26.             }
    27.             .box1:hover .inner:nth-child(2){
    28.                 transform: rotateZ(300deg);
    29.             }
    30.             .box1:hover .inner:nth-child(3){
    31.                 transform: rotateZ(240deg);
    32.             }
    33.             .box1:hover .inner:nth-child(4){
    34.                 transform: rotateZ(180deg);
    35.             }
    36.             .box1:hover .inner:nth-child(5){
    37.                 transform: rotateZ(120deg);
    38.             }
    39.             .box1:hover .inner:nth-child(6){
    40.                 transform: rotateZ(60deg);
    41.             }
    42.         </style>
    43.     </head>
    44.     <body>
    45.         <div class="box1">
    46.             <div class="inner">
    47.                 <img src="image/1.jpg" >
    48.             </div>
    49.             <div class="inner">
    50.                 <img src="image/2.jpg" >
    51.             </div>
    52.             <div class="inner">
    53.                 <img src="image/3.jpg" >
    54.             </div>
    55.             <div class="inner">
    56.                 <img src="image/4.jpg" >
    57.             </div>
    58.             <div class="inner">
    59.                 <img src="image/5.jpg" >
    60.             </div>
    61.             <div class="inner">
    62.                 <img src="image/6.jpg" >
    63.             </div>
    64.         </div>
    65.     </body>
    66. </html>