利用css制作3d图片旋转_练习

最新推荐文章于 2024-04-11 12:19:59 发布

无名之辈无名之辈

最新推荐文章于 2024-04-11 12:19:59 发布

阅读量201

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/ice_stone_kai/article/details/105481199

版权

效果:
在这里插入图片描述
鼠标触碰时(停止旋转并高亮):

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_3d相册_练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("pic/bac(bac).jpg") no-repeat;
            background-size: cover;
            overflow: hidden;
        }

        ul {
            width: 200px;
            height: 200px;
            /*background-color: red;*/
            position: absolute;
            bottom: 100px;
            left: 50%;
            margin-left: -100px;
            transform-style: preserve-3d;
            /*transform: rotateX(-10deg);*/
            animation: sport 6s linear 0s infinite normal;
        }
        ul:hover{
            animation-play-state: paused;
        }
        ul:hover li img{
            opacity: 0.5;
        }
        ul li:hover img{
            opacity: 1;
        }

        @keyframes sport {
            from {transform: rotateX(-10deg) rotateY(0deg);
            }
            to {transform: rotateX(-10deg) rotateY(360deg);
            }
        }

        ul li {
            width: 200px;
            height: 200px;
            list-style: none;
            position: absolute;
            left: 0;
            top: 0;
            background-color: black;
        }

        ul li:nth-child(1) {
            transform: rotateY(60deg) translateZ(200px);
        }

        ul li:nth-child(2) {
            transform: rotateY(120deg) translateZ(200px);
        }

        ul li:nth-child(3) {
            transform: rotateY(180deg) translateZ(200px);
        }

        ul li:nth-child(4) {
            transform: rotateY(240deg) translateZ(200px);
        }

        ul li:nth-child(5) {
            transform: rotateY(300deg) translateZ(200px);
        }

        ul li:nth-child(6) {
            transform: rotateY(360deg) translateZ(200px);
        }

        img {
            width: 200px;
            height: 200px;
            border: 5px solid skyblue;
            box-sizing: border-box;
        }
        .heart{
            width: 250px;
            height: 157px;
            position: absolute;
            left: 100px;
            bottom: 100px;
            animation: move 10s linear 0s infinite normal;
            border-style: none;
        }
        @keyframes move {
            0%{
                left: 100px;
                bottom: 100px;
                opacity: 1;
            }
            20%{
                left: 300px;
                bottom: 300px;
                opacity: 0;
            }
            40%{
                left: 500px;
                bottom: 500px;
                opacity: 1;
            }
            60%{
                left: 800px;
                bottom: 300px;
                opacity: 0;
            }
            80%{
                left: 1200px;
                bottom: 100px;
                opacity: 1;
            }
            100%{
                left: 800px;
                bottom: -200px;
            }


        }
    </style>
</head>
<body>

<ul>
    <li><img src="pic/%20%20(1).jpg"></li>
    <li><img src="pic/%20%20(2).jpg"></li>
    <li><img src="pic/%20%20(3).jpg"></li>
    <li><img src="pic/%20%20(4).jpg"></li>
    <li><img src="pic/%20%20(5).jpg"></li>
    <li><img src="pic/%20%20(6).jpg"></li>
</ul>
<!--如果不想飘来飘去的,可以将下面的标签注释-->
<img src="pic/1.jpg" class="heart">
<audio src="pic/天气之子(管弦乐改编版).mp3" autoplay="autoplay" loop="loop"></audio>
</body>
</html>

无名之辈无名之辈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用css制作3d图片旋转_练习

效果:鼠标触碰时(停止旋转并高亮):代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>6_3d相册_练习</title> <style> * { ...
复制链接

扫一扫