html与css实现2D效果旋转

最新推荐文章于 2024-04-09 09:47:52 发布

a little peanut

最新推荐文章于 2024-04-09 09:47:52 发布

阅读量2k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/dayexiaofan/article/details/90490112

版权

前端专栏收录该内容

13 篇文章 11 订阅

订阅专栏

1、盾牌

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="shortcut icon" href="bkq.ico"  type="image/x-icon"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ff3040;
        }
        div {
            width: 440px;
            margin: 100px auto;
        }
        div img {
            transition: all 1s;
        }
        div img:nth-child(1) {
            transform: translate(200px,-100px) rotate(60deg);
        }
        div img:nth-child(2) {
            transform: translate(-300px,-150px) rotate(90deg);
        }
        div img:nth-child(3) {
              transform: translate(-100px,180px) rotate(-100deg);
        }
        div img:nth-child(4) {
            transform: translate(-80px,80px) rotate(125deg);
        }
        div img:nth-child(5) {
            transform: translate(200px,-100px) rotate(150deg);
        }
        div img:nth-child(6) {
            transform: translate(180px,180px) rotate(180deg);
        }
        div img:nth-child(7) {
            transform: translate(120px,120px) rotate(120deg);
        }
        div img:nth-child(8) {
            transform: translate(130px,140px) rotate(150deg);
        }
        div img:nth-child(9) {
            transform: translate(500px,-305px) rotate(390deg);
        }
        div:hover img {
            transform: none;
        }
    </style>
</head>
<body>
<div>
    <img src="../images/shield_1_01.png" alt="loading"/>
    <img src="../images/shield_1_02.png" alt="loading"/>
    <img src="../images/shield_1_03.png" alt="loading"/>
    <img src="../images/shield_1_04.png" alt="loading"/>
    <img src="../images/shield_1_05.png" alt="loading"/>
    <img src="../images/shield_1_06.png" alt="loading"/>
    <img src="../images/shield_1_07.png" alt="loading"/>
    <img src="../images/shield_1_08.png" alt="loading"/>
    <img src="../images/shield_1_09.png" alt="loading"/>
</div>
</body>
</html>

在这里插入图片描述
2、旋转的楚乔

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     div {
         width: 250px;
         height: 170px;
         border: 1px solid pink;
         margin: 200px auto;
         position: relative;
     }
        div img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: top right;

        }
        /*鼠标经过div 第一张图片旋转*/
     div:hover img:nth-child(1){
         transform: rotate(60deg);
     }
     div:hover img:nth-child(2){
         transform: rotate(120deg);
     }
     div:hover img:nth-child(3){
         transform: rotate(180deg);
     }
     div:hover img:nth-child(4){
         transform: rotate(240deg);
     }
     div:hover img:nth-child(5){
         transform: rotate(300deg);
     }
     div:hover img:nth-child(6){
         transform: rotate(360deg);
     }
    </style>
</head>
<body>
<div>

    <img src="../images/6.jpg" alt="loading"/>
    <img src="../images/5.jpg" alt="loading"/>
    <img src="../images/4.jpg" alt="loading"/>
    <img src="../images/3.jpg" alt="loading"/>
    <img src="../images/2.jpg" alt="loading"/>
    <img src="../images/1.jpg" alt="loading"/>
</div>
</body>
</html>

在这里插入图片描述

a little peanut

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
html与css实现2D效果旋转

1、盾牌<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="shortcut icon" href="bkq.ico" type="image/x-icon"/&gt...
复制链接

扫一扫