CSS3-3D动画制作旋转立方体

3D动画是CSS3才有的属性，制作立方体的思路是使用6个正方形div，通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。

旋转后的面会变成新的X-Y面，旋转后Z轴和位移是对新的面来说的，不是原来的面来说的，这点很重要，一定不要搞错。（也就是旋转后坐标轴的方向会改变）

代码很短，主要属性都加了注释了

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3动画制作旋转立方体</title><style>/* 制作动画的关键字@keyframes */@keyframes rotate {100% {/* 按(-1,1,0)这个矢量方向旋转360度，之所以不选坐标轴，是为了能看到六个面~ */transform: rotate3D(-1, 1, 0, 360deg);}}body {/* 视角距离，给3D元素的父亲，否则无法看到3D效果 */perspective: 1000px;}section {position: relative;width: 100px;height: 100px;line-height: 100px;text-align: center;margin: 100px auto;/* 使子元素以3D形式显示，默认是2D，没有立体感 */transform-style: preserve-3d;/* 动画调用 调用名为rotate的动画，执行周期是5s，线性速度变化，永久变化 */animation: rotate 5s linear infinite;}div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}/* rotateX是以X轴为旋转轴，translate移动的位置是以旋转后的面为X-Y平面，不是以旋转前的面，这一点一定要理解。 *//* 前面 */div:nth-child(1) {/* 前面先旋转0度，然后在3D空间内，往面向用户的方向前进50px */transform: rotateY(0deg) translateZ(50px);background-color: purple;}/* 后面 *//* 后面先旋转180度，然后在3D空间内，往面向用户的方向前进50px，注意此时已经旋转到了背面，用户是面向背面了 */div:nth-child(2) {transform: rotateY(180deg) translateZ(50px);background-color: rgb(32, 128, 0);}/* 上面 */div:nth-child(3) {transform: rotateX(90deg) translateZ(50px);background-color: rgb(73, 63, 170);}/* 下面 */div:nth-child(4) {transform: rotateX(-90deg) translateZ(50px);background-color: rgb(194, 110, 33);}/* 左面 */div:nth-child(5) {transform: rotateY(-90deg) translateZ(50px);background-color: rgb(48, 201, 168);}/* 右面 */div:nth-child(6) {transform: rotateY(90deg) translateZ(50px);background-color: pink;}</style>
</head>
<body><section><div>01 - 前面</div><div>02 - 后面</div><div>03 - 顶面</div><div>04 - 底面</div><div>05 - 左面</div><div>06 - 右面</div></section>
</body>
</html>

CSS3-3D动画制作旋转立方体相关推荐

8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
CSS3 3D动画（一）
CSS3 3D动画知识点详解这篇文章的主要内容是关于css3关于新增3d部分的一个解析,那么下一篇内容我们将会进行一个3D相册的一个练习. 由于CSS3的新增还有很多浏览器的不支持,所以我们简单说一 ...
android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子（或称骰子？）...
dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...
3D动画制作软件有哪些？怎么使用
常见的 3D 动画制作软件有: Autodesk Maya Blender 3ds Max Cinema 4D Houdini Lightwave 3D 使用方法因软件不同而异,建议您根据自己的需求选 ...
Nukeygara Akeytsu（3D动画制作软件）官方正式版V20.3.5 | 动画制作软件哪个好用
Nukeygara Akeytsu 2020 是一款非常优秀且设计新颖功能完整的高效专业3D动画制作软件,旨在重新考虑"针对艺术家而非工程师"的角色装配和动画制作过程,通过全屏视口 ...
3D动画制作创意体现
首先,电视画面信息要清晰.准确.简洁.集中.动画制作公司的概念不同于一般的动画感,动画是一门综合性的艺术,它是绘画.卡通.电影.数字媒体.摄影.音乐.文学等艺术表现形式的集合.从不同的角度看,聚田文化 ...
MATLAB 3D 动画制作（一）- 3D 图形设计
MATLAB 3D 动画制作(一)- 3D 图形设计 MATLAB 3D Animation -- 3D object design Auther: Sonictl Northeastern Un ...
【OpenGL】“我叫MT”纯手工3D动画制作之1——基础介绍
最近在家研习面经,温习基础,索性花些时间将本科期间完成的一些学习之作整理出来,分享之余顺便水点经验其实这个事情起源于一门"计算机图形与动画(Computer Graphics & ...
最全的3D动画软件介绍来了！良心总结9款3D动画制作必备软件
现在,市面上流行着的3D动画软件如此之多,以至于很难敲定到底哪一款更适合自己或自己的团队.本篇文章带来了一些热门的.被视为行业标准的3D动画软件的介绍,帮助您更好地做出选择. 不仅如此,您还能从文章中 ...
html5制作一个立方体,CSS3 3D transforms系列教程-立方体
学习制作3D翻转卡片是开始学习3D transform的一个好方法.一旦你掌握了3D翻转卡片的制作方法,是不是迫不及待的想制作更复杂的3D物体?我们在这个教程中将开始学习制作3D立方体. 3D立方体的 ...

CSS3-3D动画制作旋转立方体

CSS3-3D动画制作旋转立方体

CSS3-3D动画制作旋转立方体相关推荐

最新文章

热门文章