用css3写一个旋转立方块

最新推荐文章于 2022-04-18 18:10:33 发布

置顶我是药神!

最新推荐文章于 2022-04-18 18:10:33 发布

阅读量378

点赞数

分类专栏：小练习文章标签： css3 立方体 3D方块动画

本文链接：https://blog.csdn.net/MB_xiemo/article/details/99086986

版权

小练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用css3动画 + html 写一个旋转立方块

利用css3的旋转平移 3D等等属性写一个立体旋转的立方体;
在这里插入图片描述
首先先写出立方体的结构,一个立方体六个面所以写六个div

然后写出初始样式设置方块的大小,利用弹性盒子居中到页面的中间，变成了这样

接下来用定位属性把他们放在一起

给父元素一个3D转换transform-style: preserve-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-UA-Compatible" content="ie=edge">
    <title>立体方盒</title>
    <style>
        html{
            height:100%;
        }
        body{
            height:100%;
            margin:0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box{
            width:100px;
            height:100px;
            position: relative;
            transform-style: preserve-3d;
        }
        .whole{
            width:100px;
            height:100px;
            border:1px solid #ddd;
            position: absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="whole top"></div>
        <div class="whole bottom"></div>
        <div class="whole left"></div>
        <div class="whole right"></div>
        <div class="whole front"></div>
        <div class="whole behind"></div>
    </div>
</body>
</html>

接下来设置方块的六个面
在这里插入图片描述
利用旋转平移拼装成一个立方体
不动的时候就变成了这样

加上旋转属性就会发现transform: rotatex(45deg) rotatey(45deg);

最后加上旋转动画就完成啦

最终代码

<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>
        html{
            height:100%;
        }
        body{
            height:100%;
            margin:0;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
        }
        .box{
            width:100px;
            height:100px;
            position: relative;
            transform-style: preserve-3d;
            animation:rotate 5s linear infinite;
        }
        
        .whole{
            width:100px;
            height:100px;
            border:1px solid #757575;
            opacity: 0.6;
            position: absolute;
            top:0;
            left:0;
        }
        @keyframes rotate{
        from{
         transform: rotateX(0deg) rotateY(0deg);
        }
        to{
            transform: rotateX(360deg) rotateY(720deg);
        }

    }
        .top {
            background:darkmagenta;
            /* 想象旋转轴指向自己，顺时针为正值 */
            transform: rotateX(90deg) translateZ(50px);
        }

        .bottom {
            background:yellow;
            transform: rotateX(-90deg) translateZ(50px);
        }

        .left {
            background:cyan;
            transform: rotateY(-90deg) translateZ(50px);
        }

        .right {
            background:chartreuse;
            transform: rotateY(90deg) translateZ(50px);
        }

        .behind {
            background:chocolate;
            /* 使用 平移 进行位置控制 */
            transform: translateZ(-50px) rotateX(180deg);
        }

        .front {
            background:red;
            transform: translateZ(50px) rotateX(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="whole top"></div>
        <div class="whole bottom"></div>
        <div class="whole left"></div>
        <div class="whole right"></div>
        <div class="whole front"></div>
        <div class="whole behind"></div>
    </div>
</body>
</html>

我是药神!

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用css3写一个旋转立方块

利用css3动画 + html 写一个旋转立方块利用css3的旋转平移 3D等等属性写一个立体旋转的立方体;首先先写出立方体的结构,一个立方体六个面所以写六个div然后写出初始样式设置方块的大小,利用弹性盒子居中到页面的中间，变成了这样接下来用定位属性把他们放在一起给父元素一个3D转换transform-style: preserve-3d;<!DOCTYPE htm...
复制链接

扫一扫

专栏目录