宝，我来交作业了！旋转立方体的实现

二琳爱吃肉

已于 2022-07-18 10:37:48 修改

阅读量447

点赞数 1

分类专栏：前端

于 2021-07-30 16:34:11 首次发布

本文链接：https://blog.csdn.net/weixin_45906196/article/details/119239959

版权

css animation 定位 css3

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为啥要写这篇博客嘞，一是因为我好久没更了，离我成为CSDN大佬的目标越来越远了，第二是某人昨天晚上跟我说要检验一下我的学习成果，所以嘞想做个旋转立方体给他，图片用的是俺们的头像。图片可换嗷~
好了，不说废话了，我要开始写了。手动狗头

一、思路

设立方体长宽高都为a.

立方体

首先写一个大的框架，再写六个子面，这些面都在一个平面内，然后我们通过旋转、位移等方式改变六个面的位置，从而形成一个完整的立方体。
立方体一共六个面，分别对应div1到div6。
div1–上面沿着X轴旋转90度，沿着Z轴正向移动1/2a。
div2–下面沿着X轴旋转-90度，沿着Z轴正向移动1/2a。
div3–右面沿着Y轴旋转90度，沿着Z轴正向移动1/2a.
div4–里面沿着Z轴反向移动1/2a。
div5–左面沿着Y轴旋转-90度，沿着Z轴正向移动1/2a。
div6–外面沿着z轴正向移动1/2a。
示意图如下（丑是丑了点，将就看吧）

旋转

用animation写

二、实现

1.构建框架

div1-div6就是我们的要做的旋转立方体的六个面，先构建出框架，一会在写样式。
在这里插入图片描述

2.构建立方体

选中所有元素，margin和padding都设置为零；
给container设置宽高各200px,设置margin上下150px,左右自适应；
选中所有container中的div设置样式宽高和container一样都是200px；
给父元素container相对定位，子元素div绝对定位；
再给每一个小的div1-div6设置背景图片，并进行旋转移动操作形成立方体。
还可以设置透明度和圆角。
实现后如下图
在这里插入图片描述

3.旋转部分

旋转部分用animation 属性run 时间设置为2s 线性播放次数设置为无限循环
animation: run 2s linear infinite
给父元素设置视角，子元素设置3d变换。
run 沿着Y轴旋转360度。
最终效果如下图：
在这里插入图片描述

三、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转立方体</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*background: #000;*/
            perspective: 800px;/*父元素设置视角*/
        }
        #container{
            width: 200px;
            height: 200px;
            margin: 150px auto;
            position: relative;
            animation: run 2s linear infinite;
            transform-style: preserve-3d;/*子元素3d变换*/
        }
        @keyframes run{
            100%{
                transform: rotateY(360deg);
            }
        }
        #container div{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            background-size: 100% 100%;
            border-radius: 10px;
            box-shadow: 0 0 50px white;
        }
        #div1{
            background: url(img/1.jpg);
            transform: rotateX(90deg) translateZ(100px);
        }
        #div2{
            background: url(img/2.jpg);
            transform: rotateX(-90deg) translateZ(100px);
            z-index:1;
        }
        #div3{
            background: url(img/3.jpg);
            transform :rotateY(90deg) translateZ(100px);
        }
        #div4{
            background: url(img/4.jpg);
            transform: translateZ(-100px);
        }
        #div5{
            background: url(img/5.jpg);
            transform :rotateY(-90deg) translateZ(100px);
        }
        #div6{
            background: url(img/6.jpg);
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
        <div id="div6"></div>
    </div>
</body>
</html>

二琳爱吃肉

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
宝，我来交作业了！旋转立方体的实现

一、思路立方体首先写一个大的框架，再写六个子面，这些面都在一个平面内，然后我们通过旋转、位移等方式改变六个面的位置，从而形成一个完整的立方体。旋转第一张图上面沿着X轴旋转正90deg, 沿着Z轴向上平移100px 以第三张图右面沿着Y轴旋转90deg,沿着三左面无下面六外面二里面四......
复制链接

扫一扫