CSS复仇者联盟立体盒子

最新推荐文章于 2023-01-13 12:47:03 发布

ps酷教程

最新推荐文章于 2023-01-13 12:47:03 发布

阅读量216

点赞数

分类专栏：前端学习文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_16992475/article/details/124650645

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        body {
        	/* perspective视距添加给body */
            perspective: 800px;
        }
        .cube {
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            margin: 50px auto;
            /* 开启父元素的相对定位 */
            position: relative;
            animation: r3d 15s infinite linear;
        }
        img {
        	/* 设置图片为不是基线对齐的方式 */
            vertical-align: top;
        }
        .cube > div {
            height: 200px;
            width: 200px;
            /* 开启子元素的绝对定位，让子元素都重叠到了一起 */
            position: absolute;
            opacity: .7;
        }

        .box1 {
            transform: rotateY(90deg) translateZ(100px);
        }

        .box2{
            transform: rotateY(-90deg) translateZ(100px);
        }

        .box3{
            transform: rotateX(-90deg) translateZ(100px);
        }

        .box4{
            transform: rotateX(90deg) translateZ(100px);
        }

        .box5{
            transform: rotateX(0deg) translateZ(100px);
        }

        .box6{
            transform: rotateY(180deg) translateZ(100px);
        }

        @keyframes r3d {
            from {
                transform: rotateX(0) rotateZ(0);
            }

            to {
                transform: rotateX(1turn) rotateZ(1turn);
            }
        }
    </style>
</head>
<body >
    
    <div class="cube">
        <div class="box1">
            <img src="./img/r/1.jpg" >
        </div>
        <div class="box2">
            <img src="./img/r/2.jpg" >
        </div>
        <div class="box3">
            <img src="./img/r/3.jpg" >
        </div>
        <div class="box4">
            <img src="./img/r/4.jpg" >
        </div>
        <div class="box5">
            <img src="./img/r/5.jpg" >
        </div>
        <div class="box6">
            <img src="./img/r/6.jpg" >
        </div>
    </div>

</body>
</html>

ps酷教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS复仇者联盟立体盒子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; } body { /* perspective视距添加给body */ .
复制链接

扫一扫

专栏目录