1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>Document</title>
    8. </head>
    9. <style>
    10. body{
    11. perspective: 1000px;
    12. }
    13. section{
    14. position: relative;
    15. width: 300px;
    16. height: 200px;
    17. margin: 120px auto;
    18. transform-style: preserve-3d;
    19. animation: rotate 10s linear infinite;
    20. }
    21. @keyframes rotate{
    22. 0%{
    23. transform: rotateY(0);
    24. }
    25. 100%{
    26. transform: rotateY(360deg);
    27. }
    28. }
    29. section:hover{
    30. /* 鼠标放入section停止动画 */
    31. animation-play-state: paused;
    32. }
    33. section div{
    34. position: absolute;
    35. width: 100%;
    36. height: 100%;
    37. top: 0;
    38. left: 0;
    39. background: url(../HTML5+CSS3/media/dog.jpg) no-repeat;
    40. }
    41. section div:nth-child(1){
    42. transform: translateZ(300px);
    43. }
    44. /* 先旋转在移动 */
    45. section div:nth-child(2){
    46. transform: rotateY(60deg) translateZ(300px);
    47. }
    48. section div:nth-child(3){
    49. transform: rotateY(120deg) translateZ(300px);
    50. }
    51. section div:nth-child(4){
    52. transform: rotateY(180deg) translateZ(300px);
    53. }
    54. section div:nth-child(5){
    55. transform: rotateY(240deg) translateZ(300px);
    56. }
    57. section div:nth-child(6){
    58. transform: rotateY(300deg) translateZ(300px);
    59. }
    60. </style>
    61. <body>
    62. <section>
    63. <div></div>
    64. <div></div>
    65. <div></div>
    66. <div></div>
    67. <div></div>
    68. <div></div>
    69. </section>
    70. </body>
    71. </html>

    image.png