html 3D图片旋转木马

最新推荐文章于 2023-08-02 19:52:27 发布

x² （y²－x²）²＝1

最新推荐文章于 2023-08-02 19:52:27 发布

阅读量435

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/smx19980410/article/details/109620792

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

旋转

这是我创建的html和img的文件要注意图片的路径

我设置了6张图片因为一圈是360度所以每张是60度以此类推

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>旋转木马</title>
    <style>
        body {
        /* 透视 */
            perspective: 1000px;
        }
        
        section {
            position: relative;
            width: 277px;
            height: 215px;
            margin: 100px auto;
            transform-style: preserve-3d;
            /* 添加动画 */
            animation: m 10s linear infinite;
            /* 中心添加图片 */
            background: url(../img/3.jpg) no-repeat 100% 100%;
        }
        
        section:hover {
            /* 鼠标放上去  停止动画 */
            animation-play-state: paused;
        }
        
        @keyframes m {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(../img/11.png) no-repeat;
        }
        
        .box1 {
            transform: translateZ(300px);
        }
        
        .box2 {
            /* 先旋转好  在移动 */
            transform: rotateY(60deg) translateZ(300px);
        }
        
        .box3 {
            /* 先旋转好  在移动 */
            transform: rotateY(120deg) translateZ(300px);
        }
        
        .box4 {
            /* 先旋转好  在移动 */
            transform: rotateY(180deg) translateZ(300px);
        }
        
        .box5 {
            /* 先旋转好  在移动 */
            transform: rotateY(240deg) translateZ(300px);
        }
        
        .box6 {
            /* 先旋转好  在移动 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </section>
</body>

</html>

最后希望我的代码对你有所帮助！也是我的一些心得

x² （y²－x²）²＝1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 3D图片旋转木马

旋转这是我创建的html和img的文件要注意图片的路径我设置了6张图片因为一圈是360度所以每张是60度以此类推<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转木马</title> <style> body { /* 透视 */
复制链接

扫一扫