立体正方形练习

最新推荐文章于 2023-03-26 17:43:24 发布

浩哥学习编程之路

最新推荐文章于 2023-03-26 17:43:24 发布

阅读量126

点赞数

分类专栏：平时小练习

本文链接：https://blog.csdn.net/m0_46978034/article/details/115591167

版权

平时小练习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

立体正方形得原理：就是先使用定位先让他们在一起重叠，在使用左右Y轴翻转和z轴得移动拉开距离以防止他们贴在一起，中间得有一块元素将其撑开。默认情况下浏览器都是以平面翻转得如果想实现3D效果就得添加 transform-style: preserve-3d;

代码如下

<style>
视距
        html {
            perspective: 800px;
        }
        
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            /*设置变形时3d效果*/
            transform-style: preserve-3d;
            position: relative;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            /* background-color: chartreuse; */
            transition: all 2s;
            animation: zhuan 10s linear infinite;
        }
        
        .box:hover {
            transform: rotateY(90deg);
        }
        
        .box div {
            position: absolute;
            width: 200px;
            height: 200px;
            font-size: 100px;
            line-height: 200px;
            text-align: center;
            半透明
            opacity: 0.5;
            transition: all 2s;
        }
        
        .box div:nth-child(1) {
            transform: rotateY(-90deg) translateZ(100px);
            background-color: red;
        }
        
        .box div:nth-child(2) {
            transform: rotateY(90deg) translateZ(100px);
            background-color: blue;
        }
        
        .box div:nth-child(3) {
            transform: rotateX(90deg) translateZ(100px);
            background-color: pink;
        }
        
        .box div:nth-child(4) {
            transform: rotateX(-90deg) translateZ(100px);
            background-color: yellow;
        }
        
        .box div:nth-child(5) {
            transform: rotateX(0deg) translateZ(100px);
            background-color: purple;
        }
        
        .box div:nth-child(6) {
            transform: rotateX(180deg) translateZ(100px);
            background-color: royalblue;
        }
        /* 设置动画 */
        
        @keyframes zhuan {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg)rotateZ(360deg);
            }
        }
    </style>

</head>

<body>
    <div class="box">
        <div>
            <img src="cube/1.jpg" alt="">
        </div>
        <div>
            <img src="cube/2.jpg" alt="">
        </div>
        <div>
            <img src="cube/3.jpg" alt="">
        </div>
        <div>
            <img src="cube/4.jpg" alt="">
        </div>
        <div>
            <img src="cube/5.jpg" alt="">
        </div>
        <div>
            <img src="cube/6.jpg" alt="">
        </div>
    </div>
</body>

</html>

在这里插入图片描述

浩哥学习编程之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
立体正方形练习

立体正方形得原理：就是先使用定位先让他们在一起重叠，在使用左右Y轴翻转和z轴得移动，中间得有一块元素将其撑开。代码如下<style> html { perspective: 800px; } * { padding: 0px; margin: 0px; } .box { /*设置变形
复制链接

扫一扫