鼠标悬浮，图片旋转transform---rotate实例

最新推荐文章于 2021-01-11 19:31:57 发布

美妙的时光

最新推荐文章于 2021-01-11 19:31:57 发布

阅读量569

点赞数

分类专栏： python全栈文章标签： css3

本文链接：https://blog.csdn.net/weixin_44730235/article/details/106891050

版权

python全栈专栏收录该内容

18 篇文章 0 订阅

订阅专栏

鼠标悬浮，图片进行旋转，六张图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        ul {
            list-style: none;

        }
        .list .list-item {
            position:absolute;
            left:50%;
            top:50%;
            width:150px;
            height:200px;
            margin:-100px 0 0 -75px;
            transition:transform 0.9s ease;

        }
        .list .list-item img {
            width:100%;
            height:100%;

        }
        .list:hover .list-item:nth-child(6){
            transform:rotate(60deg);
        }
        .list:hover .list-item:nth-child(5){
            transform:rotate(120deg);
        }
        .list:hover .list-item:nth-child(4){
            transform:rotate(180deg);
        }
        .list:hover .list-item:nth-child(3){
            transform:rotate(240deg);
        }
        .list:hover .list-item:nth-child(2){
            transform:rotate(300deg);
        }



    </style>
</head>
<body>
    <ul class="list">
        <li class="list-item"><img src='./黑桃A.jpg'></li>
        <li class="list-item"><img src='./黑桃A.jpg'></li>
        <li class="list-item"><img src='./黑桃A.jpg'></li>
        <li class="list-item"><img src='./黑桃A.jpg'></li>
        <li class="list-item"><img src='./黑桃A.jpg'></li>
        <li class="list-item"><img src='./黑桃A.jpg'></li>
    </ul>
</body>
</html>

在这里插入图片描述

美妙的时光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬浮，图片旋转transform---rotate实例

鼠标悬浮，图片进行旋转，六张图片。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
复制链接

扫一扫