<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>图片动态旋转</title>
    <style>
        ul {
            width: 220px;
            height: 220px;
            position: relative;
            margin-left: 500px;
            margin-top: 400px;
        }
        li{
            list-style: none;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: left top;
            transition: all   1s;
        }
        ul:hover li:first-child{-webkit-transform: rotate(60deg);}
        ul:hover li:nth-child(2) {-webkit-transform: rotate(120deg);}
        ul:hover li:nth-child(3) {-webkit-transform: rotate(180deg);}
        ul:hover li:nth-child(4) {-webkit-transform: rotate(240deg);}
        ul:hover li:nth-child(5) {-webkit-transform: rotate(300deg);}
        ul:hover li:last-child {-webkit-transform: rotate(360deg);}
    </style>
</head>

12.jpg
34.jpg
56.jpg
1.png
演示:12.mov

<body>
    <ul>
        <li><img src="12.jpg" style="width: 200px; height: 280px;"></li>
        <li><img src="34.jpg" style="width: 200px; height: 280px;"></li>
        <li><img src="56.jpg" style="width: 200px; height: 280px;"></li>
        <li><img src="12.jpg" style="width: 200px; height: 280px;"></li>
        <li><img src="34.jpg" style="width: 200px; height: 280px;"></li>
        <li><img src="56.jpg" style="width: 200px; height: 280px;"></li>
    </ul>
</body>