【3D旋转动画小猪佩奇】

最新推荐文章于 2024-08-22 11:06:05 发布

༺๑码农小黑๑༻

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量111

点赞数 1

分类专栏：初学者文章标签： 3d 动画前端

本文链接：https://blog.csdn.net/weixin_45298348/article/details/126090148

版权

初学者专栏收录该内容

20 篇文章 0 订阅

订阅专栏

运行结果：

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul {
            width: 200px;
            margin: 100px auto;
        }
        
        li {
            float: left;
            list-style: none;
            width: 200px;
            height: 200px;
            perspective: 400px;
            margin: 0 10px;
        }
        /*疯狂星期四*/
        
        @keyframes fz {
            0% {
                transform: rotate3d(0, 0, 0, 0deg);
            }
            /* X轴 */
            25% {
                transform: rotate3d(1, 0, 0, 90deg);
            }
            /* Y轴 */
            50% {
                transform: rotate3d(0, 1, 0, 180deg);
            }
            /* z轴 */
            75% {
                transform: rotate3d(0, 0, 1, 270deg);
            }
            /* 对角轴 */
            100% {
                transform: rotate3d(1, 1, 0, 360deg);
            }
        }
        /*魔方猪*/
        
        @keyframes fz1 {
            to {
                transform: rotate3d(1, 1, 1, 360deg);
            }
        }
        /*对角冲锋猪*/
        
        @keyframes fz2 {
            to {
                transform: rotate3d(1, 1, 0, 360deg)rotate3d(0, 1, 1, 360deg);
            }
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 5s;
            animation: fz2 2s infinite linear;
        }
        
        ul>li>.box:active {
            animation: fz1 2s infinite linear;
        }
        
        .box:hover {
            animation: fz 2s infinite linear;
        }
        
        .front,
        .bottom,
        .top,
        .back,
        .left,
        .right {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #fff;
            text-align: center;
            line-height: 35px;
        }
        
        .front {
            background: url(../img/1.jpeg)no-repeat center;
            z-index: 1;
            transform: translateZ(100px);
        }
        
        .bottom {
            background: url(../img/2.jpeg)no-repeat center;
            transform: translateY(100px) rotateX(-90deg);
        }
        
        .top {
            background: url(../img/3.jpeg)no-repeat center;
            transform: translateY(-100px) rotateX(90deg);
        }
        
        .back {
            background: url(../img/4.jpeg)no-repeat center;
            transform: translate3d(0px, 0px, -100px)rotateX(180deg);
        }
        
        .left {
            background: url(../img/5.jpeg)no-repeat center;
            transform: translateX(100px) rotateY(90deg);
        }
        
        .right {
            background: url(../img/6.jpeg)no-repeat center;
            transform: translateX(-100px) rotateY(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front"></div>
                <div class="bottom"></div>
                <div class="top"></div>
                <div class="back"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </li>
    </ul>
</body>

</html>