【前端学习笔记】12-css动画学习总结之3D立体盒子

SevgiliD

已于 2022-07-08 08:51:41 修改

阅读量256

点赞数

分类专栏：【前端学习笔记Html5&css】【前端学习笔记】文章标签： css 学习 css3 前端

于 2022-07-04 10:31:50 首次发布

本文链接：https://blog.csdn.net/SevgiliD/article/details/125594774

版权

【前端学习笔记Html5&css】同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

【前端学习笔记】

10 篇文章 0 订阅

订阅专栏

通过实现3D立体盒子来对css动画学习总结

练习素材

在这里插入图片描述

练习代码

HTML代码

<!-- 创建一个外部的容器 -->
    <div class="cube">
        <div class="box1">
            <img src="./exercise/复仇者联盟1.jpg" alt="">
        </div>
        <div class="box2">
            <img src="./exercise/复仇者联盟2.jpg" alt="">
        </div>
        <div class="box3">
            <img src="./exercise/复仇者联盟3.jpg" alt="">
        </div>
        <div class="box4">
            <img src="./exercise/复仇者联盟4.jpg" alt="">
        </div>
        <div class="box5">
            <img src="./exercise/复仇者联盟5.jpg" alt="">
        </div>
        <div class="box6">
            <img src="./exercise/复仇者联盟6.jpg" alt="">
        </div>
    </div>

css代码

<style>
        html{
            perspective: 800px;
        }
        .cube{
            width: 200px;
            height: 200px;
         
            margin: 100px auto;
            /* 设置3d变形效果 */
            transform-style: preserve-3d;
            transform: rotateX(45deg) rotateZ(45deg);
            /* 设置动画效果 */
            animation: rotate 15s infinite linear;
        }
        .cube>div{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.7;
      
        }
        img{
            /* 改变对齐方式，清除图片下缝隙 */
            vertical-align: top;
        }
        .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: rotateY(0deg) translateZ(100px);
        }
        .box6{
            transform: rotateY(180deg) translateZ(100px);
        }
        @keyframes rotate {
            form{
                transform: rotateX(0) rotateZ(0);
            }
            to{
                transform: rotateX(1turn) rotateZ(1turn);
            }
            
        }
        
    </style>