css3+html5——图片旋转

最新推荐文章于 2024-10-04 08:00:00 发布

十二Tel

最新推荐文章于 2024-10-04 08:00:00 发布

阅读量4k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42426348/article/details/80654418

版权

简单阐述一下：当鼠标移到图片上时，首尾两张图片实现分别向两边旋转功能。（图片可以自己选择）

起初页面效果如下：

当鼠标移动到图片上时效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片旋转</title>
    <style type="text/css">
        .wrap{
            width: 300px;
            height: 200px;
            margin: 2rem auto;
        }
        .wrap > img{
            position: absolute;
            border: 10px solid magenta;
            box-sizing: border-box;
            box-shadow: 4px 4px 3px rgba(0,0,0,0.2);
            -webkit-transform-origin: center 400px;
            transform-origin:center 400px;
            -webkit-transition: transform .7s ease;
            transition: transform .7s ease;/*移动时间为0.7s，速度为慢->快->慢*/
        }
        .wrap img:first-child{ /*first-child为第一张图片的意思*/
            transform: rotate(5deg);
            /*-moz代表firefox浏览器私有属性-ms代表ie浏览器私有属性-webkit代表safari、chrome私有属性*/
            -webkit-transform: rotate(5deg);
        }
        .wrap img:last-child{/*last-child为第二张图片*/
            transform: rotate(-5deg);/*旋转角度*/
            -webkit-transform: rotate(-5deg);/*safari、chrome浏览器的私有属性*/
        }
        .wrap:hover img:first-child{
            transform: rotate(25deg);
            -webkit-transform: rotate(25deg);
        }
        .wrap:hover img:last-child{
            transform: rotate(-25deg);
            -webkit-transform: rotate(-25deg);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="../img/cy.png" alt="" width="300" height="200">
        <img src="../img/cy.png" alt="" width="300" height="200">
        <img src="../img/cy.png" alt="" width="300" height="200">

    </div>
</body>
</html>