CSS3D-实现WebpackLogo

最新推荐文章于 2024-07-24 22:39:14 发布

算云烟

最新推荐文章于 2024-07-24 22:39:14 发布

阅读量151

点赞数 1

分类专栏： CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/zxcbnm7089/article/details/119956462

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、效果如下：

在这里插入图片描述

第一幅图为无透视距离效果
第二幅图增加了透视距离

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3D实现webpack-Logo</title>
    <style type="text/css">
        @keyframes inner {
            0% {
                transform: rotateX(-33.5deg) rotateY(45deg);
            }
            40%,
            to {
                transform: rotateX(-33.5deg) rotateY(-315deg);
            }
        }

        @keyframes outer {
            0% {
                transform: rotateX(-33.5deg) rotateY(45deg);
            }
            40%,
            to {
                transform: rotateX(-33.5deg) rotateY(315deg);
            }
        }

        body,
        html {
            margin:0;
            padding:0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
        }

        ul {
            padding: 0;
            list-style: none;
        }

        .container {
            position: relative;
            margin: auto;
            border: 1px solid #8d8d8d;
            width: 700px;
            height: 450px;
            background-color: #48616d;
        }

        .perspective {
            perspective: 200px;
            transform: rotateX(10deg);
        }

        .cube-inner, .cube {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width:auto;
            height:auto;
            transform: translate(-50%,-50%)  rotateX(-33.5deg) rotateY(45deg);;
            transform-style: preserve-3d;
            /*background-color: aqua;*/
        }

        .cube {
            margin: -50px 0 0 -50px;
            transform-origin: 50px 50px;
            -webkit-animation: outer 6s ease-in-out infinite 2s;
            animation: outer 6s ease-in-out infinite 2s;
        }

        .cube-inner {
            margin: -25px 0 0 -25px;
            transform-origin: 25px 25px;
            -webkit-animation: inner 6s ease-in-out infinite 2s;
            animation: inner 6s ease-in-out infinite 2s;
        }

        .cube-inner li {
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
        }

        .cube-inner .top {
            background: #92ddf1;
            transform: rotateX(90deg) translateZ(25px);
        }

        .cube-inner .bottom {
            background: #8dbef5;
            transform: rotateX(-90deg) translateZ(25px);
        }

        .cube-inner .front {
            background: #f5c493;
            transform: translateZ(25px);
        }

        .cube-inner .back {
            background: #95f3b8;
            transform: translateZ(-25px);
        }

        .cube-inner .right {
            background: #9bc5f8;
            transform: rotateY(90deg) translateZ(25px);
        }
        .cube-inner .left {
            background: #a2abfa;
            transform: rotateY(-90deg) translateZ(25px);
        }

        .cube li {
            display: block;
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid #fff;
            opacity: 0.5;
        }

        .cube .top {
            background: #92ddf1;
            transform: rotateX(90deg) translateZ(50px);
        }

        .cube .bottom {
            background: #8dbef5;
            transform: rotateX(-90deg) translateZ(50px);
        }

        .cube .front {
            background: #f5c493;
            transform: translateZ(50px);
        }

        .cube .back {
            background: #95f3b8;
            transform: translateZ(-50px);
        }

        .cube .right {
            background: #9bc5f8;
            transform: rotateY(90deg) translateZ(50px);
        }
        .cube .left {
            background: #a2abfa;
            transform: rotateY(-90deg) translateZ(50px);
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="cube-inner">
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="front"></li>
            <li class="back"></li>
            <li class="right"></li>
            <li class="left"></li>
        </ul>
        <ul class="cube">
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="front"></li>
            <li class="back"></li>
            <li class="right"></li>
            <li class="left"></li>
        </ul>
    </div>

    <div class="container perspective">
        <ul class="cube-inner">
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="front"></li>
            <li class="back"></li>
            <li class="right"></li>
            <li class="left"></li>
        </ul>
        <ul class="cube">
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="front"></li>
            <li class="back"></li>
            <li class="right"></li>
            <li class="left"></li>
        </ul>
    </div>
</body>
</html>

算云烟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3D-实现WebpackLogo

一、效果如下：第一幅图为无透视距离效果第二幅图增加了透视距离二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3D实现webpack-Logo</title> <style type="text/css"> @keyframes inner {
复制链接

扫一扫

专栏目录