02.CSS动画示例-->鼠标悬停图片旋转 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 300px;
            height:300px;
            background-color: yellow;
　　　　　　　　/*弹性盒子设置垂直居中*/
            display: flex;
            align-items: center;
        }
        img{
            transition: all 1s ease;
        }
        img:hover{
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
<div id="div1">
    <div style="margin: auto"><img src="../img/H5.png" alt=""></div>
</div>
<div id="div2"></div>
</body>
</html>

　　

posted @ 2017-10-11 11:28  Smart.User.It  阅读(364)  评论(0)    收藏  举报