纯CSS实现3D立方旋转体

最新推荐文章于 2022-03-01 20:32:16 发布

Shawn Yu

最新推荐文章于 2022-03-01 20:32:16 发布

阅读量316

点赞数

分类专栏：知识整理记录

本文链接：https://blog.csdn.net/weixin_44681533/article/details/89005660

版权

知识整理记录专栏收录该内容

5 篇文章 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>旋转立方体</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    body{
        background: #222;
    }
    div.wrap{
        width:200px;
        perspective: 1000px; 
        position: absolute;
        top:50%;
        left:50%;
        transform:translateX(-50%) translateY(-50%);
    }
    .cube{
        width:200px;
        height: 200px;
        position: relative;
        transform-style:preserve-3d;
        transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);
        animation: move 20s infinite linear;
    }
    .cube>div{
        width:100%;
        height:100%;
        background:black;
        position: absolute;
        box-shadow:0 0 10px currentColor;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
    }
    .cube:hover>div{
        background: currentColor;
        box-shadow: 0 0 30px currentColor;
    }
    .cube .out-front{
        transform: translateZ(100px);
        color:deeppink;
    }
    .cube .out-back{
        transform: translateZ(-100px) rotateY(-180deg);
        color:seagreen;
    }
    .cube .out-left{
        transform: translateX(-100px) rotateY(-90deg);
        color:skyblue;
    }
    .cube .out-right{
        transform: translateX(100px) rotateY(90deg);
        color:lightcoral;
    }
    .cube .out-top{
        transform: translateY(-100px) rotateX(90deg);
        color:lightslategrey;

    }
    .cube .out-bottom{
        transform: translateY(100px) rotateX(-90deg);
        color:gold;

    }
    @keyframes move{
        0%{
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }
        100%{
            transform: rotateX(360deg) rotateY(720deg) rotateZ(720deg);
        }
        /*from 和 to 也可以*/
    }

    </style>
</head>
<body>
    <div class="wrap">
        <div class="cube">
            <div class="out-front">生</div>
            <div class="out-back">*</div>
            <div class="out-left">*</div>
            <div class="out-right">快</div>
            <div class="out-top">乐</div>
            <div class="out-bottom">日</div>
        </div>
    </div>
    
</body>
</html>

效果很好，很漂亮！

Shawn Yu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现3D立方旋转体

<!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-U...
复制链接

扫一扫