用动画做出一个正方体并且3d旋转，详解

首先，我们先设置一个大盒子（假如200px）利用 transform-style: preserve-3d; ，营造一个3d的大盒子

之后在这个大盒子中设置六个小盒子，并且设置定位，设置子绝父项，之后设置6个盒子样式，

正面盒子，向正面Z轴+100px transform: translateZ(100px);

后面盒子，向后面Z周-100px transform: translateZ(-100px);

上面盒子， x轴正值旋转90deg 向z轴正向走100px transform: rotateX(90deg) translateZ(100px);

下面盒子， x轴负值旋转90deg 向z轴正向走100px transform: rotateX(-90deg) translateZ(100px);

左面盒子， y轴正值旋转走90deg 向z轴走100px transform: rotateY(90deg) translateZ(100px);

右面盒子 y轴负值旋转走90deg 向z轴走100px transform: rotateY(-90deg) translateZ(100px);

这样一个3d的盒子就构造出来了

之后设置动画效果

@keyframes rotate {

from {

transform: rotateY(0deg) rotateX(0deg);

}

to {

transform: rotateY(360deg) rotateX(360deg);

}

设置两个旋转360deg，然后给大盒子设置animation: rotate 20s infinite linear;

用它来带动他的子盒子

之后还可以增加一个外层盒子，盒子的样式跟上面内层一样。之后在hover的时候设置Z轴增加100px即可，但是注意，因为hover也设置了transform，会与上面的样式层叠，导致上面的样式失效，所以还要早hover的时候也要设置原来该有的样式，这是这个效果最容易出现BUG的地方。

之后效果就可以出来。具体代码如下。

<!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>Document</title><style>* {margin: 0;padding: 0;}body {width: 100vw;height: 100vh;background-color: rgb(0, 33, 35);}.box {margin: 200px auto;width: 200px;height: 200px;transition: all 2s;transform-style: preserve-3d;position: relative;animation: rotate 20s infinite linear;}/* 外层前面 */.box .wfront {width: 200px;height: 200px;background-color: skyblue;position: absolute;top: 0;left: 0;transform: translateZ(100px);opacity: 0.5;}/* 外层后面 */.box .wbehind {width: 200px;height: 200px;background-color: green;transform: translateZ(-100px);position: absolute;top: 0;left: 0;opacity: 0.5;}/* 外层上 */.box .wtop {width: 200px;height: 200px;background-color: red;position: absolute;top: 0;left: 0;transform: rotateX(90deg) translateZ(100px);opacity: 0.5;}/* 外层下 */.box .wbottom {width: 200px;height: 200px;background-color: yellow;position: absolute;top: 0;left: 0;transform: rotateX(-90deg) translateZ(100px);opacity: 0.5;}/* 外层左 */.box .wleft {width: 200px;height: 200px;background-color: pink;position: absolute;top: 0;left: 0;transform: rotateY(90deg) translateZ(100px);opacity: 0.5;}/* 外层右 */.box .wright {width: 200px;height: 200px;background-color: orange;position: absolute;top: 0;left: 0;transform: rotateY(-90deg) translateZ(100px);opacity: 0.5;}@keyframes rotate {from {transform: rotateY(0deg) rotateX(0deg);}to {transform: rotateY(360deg) rotateX(360deg);}}.box:hover .iq {transform: rotateX(90deg) translateZ(200px);}.box:hover .iw {transform: rotateX(-90deg) translateZ(200px);}.box:hover .ie {transform: rotateY(90deg) translateZ(200px);}.box:hover .ir {transform: rotateY(-90deg) translateZ(200px);}.box:hover .it {transform: translateZ(200px);}.box:hover .iy {transform: translateZ(-200px);}</style>
</head><body><div class="box"><div class="wtop">上面</div><div class="wbottom">下面</div><div class="wleft">左面</div><div class="wright">右面</div><div class="wfront">前面</div><div class="wbehind">后面</div><div class="wtop iq">上面</div><div class="wbottom iw">下面</div><div class="wleft ie">左面</div><div class="wright ir">右面</div><div class="wfront it">前面</div><div class="wbehind iy">后面</div></div></body></html>

直接复制即可。

用动画做出一个正方体并且3d旋转，详解相关推荐

简单正方体的3d旋转
简单正方体的3d旋转 1.首先搭建正方体模型代码如下: body {/* 透视:没有透视不能看到3d效果 */perspective: 1200px;}.content{display: inlin ...
Unity史上最全旋转详解（Rotate，rotation，localEulerAngles，localRotation，万向节锁）
Unity史上最全旋转详解前言旋转的方法Rotate以及五种重载参数的超级详细理解 Rotate(float xAngle, float yAngle, float zAngle); Unity绕 ...
AVL树平衡旋转详解
AVL树平衡旋转详解概述 AVL树又叫做平衡二叉树.前言部分我也有说到,AVL树的前提是二叉排序树(BST或叫做二叉查找树).由于在生成BST树的过程中可能会出现线型树结构,比如插入的顺序是:1, ...
Python Matplotlib 3D绘图详解（汇总）
Python Matplotlib 3D绘图详解(汇总) 最初开发的 Matplotlib,仅支持绘制 2d 图形,后来随着版本的不断更新, Matplotlib 在二维绘图的基础上,构建了一部分较为 ...
UIDeviceOrientation 和 UIInterfaceOrientation 设备旋转的用法（实例）和 IOS6屏幕旋转详解
1. UIDeviceOrientation 和 UIInterfaceOrientation 设备旋转的用法 (实例) 博客分类: IOS / Objective-C UIDeviceOrienta ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
Java IDEA Debug模式下断点回退（一键回退到上一个断点前方）操作方法详解
@Java IDEA Debug模式下断点回退(一键回退到上一个断点前方)操作方法详解 1.请求进入第一个断点: 2.请求进入第二个断点: 3.回退断点(回到上一个断点之前,图1,图2共两种操作方法) ...
html js3d魔方,使用CSS3一个3D魔方详解~
前言最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
android camera 3d特效详解与进阶
1 概述本篇主要讲解camera,这里的camera并不是照相相关的类,而是android.graphics.Camera,这个类中封装了一个matrix,不熟悉的同学可以看前面的文章来了解.and ...

用动画做出一个正方体并且3d旋转，详解

用动画做出一个正方体并且3d旋转，详解相关推荐

最新文章

热门文章