3d照片效果实现

最新推荐文章于 2022-09-08 21:00:54 发布

夏末终秋凉

最新推荐文章于 2022-09-08 21:00:54 发布

阅读量462

点赞数

本文链接：https://blog.csdn.net/qq545698514/article/details/53689136

版权

css 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D球形</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 300px;
            height: 300px;
            /*border:1px solid #00aa00;*/
            perspective:1500px;
            margin: 100px auto;
        }
        ul{
            width: 300px;
            height: 300px;
            list-style:none;
            position:relative;
            transform-style:preserve-3d;
            transform: rotateX(30deg) rotateZ(30deg);
            animation:sport 10s linear 0s infinite normal;
        }
        ul::after{
            content:'';
            height:500px;
            width: 4px;
            background-color: #ffc780;
            position:absolute;
            left:152px;
            top:-100px;
        }
        li{
            position:absolute;
            width: 300px;
            height: 300px;
            border-radius:50%;
            overflow: hidden;
            background-position:center center;
            background-size:300px 300px;
            border:2px solid gold;

        }
        li:nth-of-type(1){
            transform:rotateY(60deg);
            background-image:url('img/素材/jacky/2.jpg');
        }
        li:nth-of-type(2){
            background-image:url('img/素材/jacky/3.jpg');
            transform:rotateY(120deg);
        }
        li:nth-of-type(3){
            background-image:url('img/素材/jacky/5.jpg');
            transform:rotateY(180deg);
        }
        li:nth-of-type(4){
            background-image:url('img/素材/jacky/6.jpg');
            transform:rotateY(240deg);
        }
        @keyframes sport{
            from{
                transform:rotateZ(30deg)rotateX(30deg) rotateY(0deg);
            }
            to{
                transform:rotateZ(30deg) rotateX(30deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

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