css写正方体并旋转

最新推荐文章于 2024-04-10 09:21:27 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2024-04-10 09:21:27 发布

阅读量109

点赞数

分类专栏：特效

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/118801969

版权

特效专栏收录该内容

31 篇文章 2 订阅

订阅专栏

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>立方体漫游</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: relative;
            margin: 0px auto;
            transform-style:preserve-3d ;/*给子级设置3d效果*/
            transform: rotateX(30deg) rotateY(50deg) rotateZ(0deg) translate3d(0px,0px,0px);
            /* 添加动画 */
            animation: rotating 10s infinite linear;
        }
        @keyframes rotating{
            0%{
                transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,0px);
            }
            20%{
                transform: rotateX(30deg) rotateY(72deg) rotateZ(0deg) translate3d(-500px,300px,400px);
            }
            40%{
                transform: rotateX(30deg) rotateY(144deg) rotateZ(0deg) translate3d(100px,500px,600px);
            }
            60%{
                transform: rotateX(30deg) rotateY(216deg) rotateZ(0deg) translate3d(500px,600px,800px);
            }
            80%{
                transform: rotateX(30deg) rotateY(288deg) rotateZ(0deg) translate3d(800px,400px,600px);
            }
            100%{
                transform: rotateX(30deg) rotateY(360deg) rotateZ(0deg) translate3d(100px,0px,0px);
            }
        }
        div[class^="face_"]{
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            opacity: 0.5;/*设置透明效果*/

        }
        .face_back{
            background-color: rgb(129, 250, 9);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,100px);
        }
        .face_front{
            background-color: #ff2d27;
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,0px);
        }
        .face_right{
            background-color: #e492ff;
            transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,50px);
        }
        .face_left{
            background-color: #8e7ceb;
            transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,-50px);
        }
        .face_down{
            background-color: #12fffd;
            transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,-50px);
        }
        .face_up{
            background-color: #61132b;
            transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,50px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="face_up">上</div>
    <div class="face_down">下</div>
    <div class="face_front">前</div>
    <div class="face_back">后</div>
    <div class="face_left">左</div>
    <div class="face_right">右</div>
</div>
</body>
</html>

爱吃烧鸭蛋的叶安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css写正方体并旋转

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
复制链接

扫一扫

专栏目录