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

最新推荐文章于 2021-06-03 06:25:36 发布

weixin_30681615

最新推荐文章于 2021-06-03 06:25:36 发布

阅读量169

点赞数

原文链接：http://www.cnblogs.com/ronghtp/p/7649716.html

版权

<!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>

转载于:https://www.cnblogs.com/ronghtp/p/7649716.html