CSS新特性——旋转

最新推荐文章于 2024-01-26 17:15:00 发布

_有光

最新推荐文章于 2024-01-26 17:15:00 发布

阅读量581

点赞数

本文链接：https://blog.youkuaiyun.com/youguang_/article/details/83547377

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 250px;
            height: 170px;
            margin: 100px auto;
            border: 1px solid red;
            position: relative;            
        }
        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: right bottom;     //以方块的右下角为旋转中心进行旋转
        }
        div:hover img:first-child {
            transform: rotate(60deg);          //第1张图片顺时针旋转60度
        }
        div:hover img:nth-child(2) {
            transform: rotate(120deg);         //第2张图片顺时针旋转120度
        }
        div:hover img:nth-child(3) {
            transform: rotate(180deg);          //第3张图片顺时针旋转180度
        }
        div:hover img:nth-child(4){
            transform: rotate(240deg);          //第4张图片顺时针旋转240度
        }
        div:hover img:nth-child(5){
            transform: rotate(300deg);          //第5张图片顺时针旋转300度
        }
        div:hover img:nth-child(6) {
            transform: rotate(360deg);           //第6张图片顺时针旋转360度
        }
    </style>
</head>
<body>
    <div>
        <img src="image/1.jpg" alt="">
        <img src="image/2.jpg" alt="">
        <img src="image/3.jpg" alt="">
        <img src="image/4.jpg" alt="">
        <img src="image/5.jpg" alt="">
        <img src="image/6.jpg" alt="">
    </div>
</body>
</html>

鼠标点击示例：