本篇记录的是使用CSS3绘制3D立方体，并旋转起来。
我的思路：
1️⃣ 首先，用div元素画6个正方形摞在一起放在画布中间。为了区分，分别给每个div选择了不同的颜色，并且设置为半透明方便透视。
2️⃣ 将6个div元素分为三组（上下一组、左右一组、前后一组），想象以画布中心为圆点，使三组分别沿x/y/z轴旋转90度。
3️⃣ 上下一组，一张向上推50%正方形边长，一张向下推50%正方形边长；左右同理向左右推50%边长，前后同理向前后推50%边长。
4️⃣ 整体旋转展示。

※ Html代码&CSS样式布局：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. .container {
  8. width: 400px;
  9. height: 400px;
  10. border: 1px solid #cccccc;
  11. }
  12.  
  13. .box {
  14. position: relative;
  15. width: 100px;
  16. height: 100px;
  17. margin: auto;
  18. margin-top: 150px;
  19. transform-style: preserve-3d;
  20. }
  21.  
  22. .box div {
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 100%;
  28. opacity: .5;
  29. transform-origin: center;
  30. }
  31.  
  32. .box div:nth-of-type(1) {
  33.  
  34. }
  35.  
  36. .box div:nth-of-type(2) {
  37. background-color: yellow;
  38. }
  39.  
  40. .box div:nth-of-type(3) {
  41. background-color: green;
  42. }
  43.  
  44. .box div:nth-of-type(4) {
  45. background-color: blue;
  46. }
  47.  
  48. .box div:nth-of-type(5) {
  49. background-color: black;
  50. }
  51.  
  52. .box div:nth-of-type(6) {
  53. background-color: darkmagenta;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58.  
  59. <div class="container">
  60. <div class="box animate">
  61. <div></div>
  62. <div></div>
  63. <div></div>
  64. <div></div>
  65. <div></div>
  66. <div></div>
  67. </div>
  68. </div>
  69. </body>
  70. </html>

　　

※ CSS3添加6个正方形的动画效果
  1. .box.animate div {
  2. animation: ease 4s 0s infinite;
  3. }
  4.  
  5. .box.animate div:nth-of-type(1) {
  6. animation-name: box1-move;
  7. }
  8.  
  9. .box.animate div:nth-of-type(2) {
  10. animation-name: box2-move;
  11. }
  12.  
  13. .box.animate div:nth-of-type(3) {
  14. animation-name: box3-move;
  15. }
  16.  
  17. .box.animate div:nth-of-type(4) {
  18. animation-name: box4-move;
  19. }
  20.  
  21. .box.animate div:nth-of-type(5) {
  22. animation-name: box5-move;
  23. }
  24.  
  25. .box.animate div:nth-of-type(6) {
  26. animation-name: box6-move;
  27. }
  28.  
  29. @keyframes box1-move {
  30. 0% {
  31. transform: rotatex(0deg);
  32. }
  33. 25% {
  34. transform: rotatex(90deg);
  35. }
  36. 50% {
  37. transform: rotatex(90deg) translatez(50px);
  38. }
  39. 100% {
  40. transform: rotatex(90deg) translatez(50px);
  41. }
  42. }
  43.  
  44. @keyframes box2-move {
  45. 0% {
  46. transform: rotatex(0deg);
  47. }
  48. 25% {
  49. transform: rotatex(90deg);
  50. }
  51. 50% {
  52. transform: rotatex(90deg) translatez(-50px);
  53. }
  54. 100% {
  55. transform: rotatex(90deg) translatez(-50px);
  56. }
  57. }
  58.  
  59. @keyframes box3-move {
  60. 0% {
  61. transform: rotatex(0deg);
  62. }
  63. 25% {
  64. transform: rotatey(90deg);
  65. }
  66. 50% {
  67. transform: rotatey(90deg) translatez(50px);
  68. }
  69. 100% {
  70. transform: rotatey(90deg) translatez(50px);
  71. }
  72. }
  73.  
  74. @keyframes box4-move {
  75. 0% {
  76. transform: rotatex(0deg);
  77. }
  78. 25% {
  79. transform: rotatey(90deg);
  80. }
  81. 50% {
  82. transform: rotatey(90deg) translatez(-50px);
  83. }
  84. 100% {
  85. transform: rotatey(90deg) translatez(-50px);
  86. }
  87. }
  88.  
  89. @keyframes box5-move {
  90. 0% {
  91.  
  92. }
  93. 25% {
  94. transform: translatez(0px);
  95. }
  96. 50% {
  97. transform: translatez(50px);
  98. }
  99. 100% {
  100. transform: translatez(50px);
  101. }
  102. }
  103.  
  104. @keyframes box6-move {
  105. 0% {
  106.  
  107. }
  108. 25% {
  109. transform: translatez(0px);
  110. }
  111. 50% {
  112. transform: translatez(-50px);
  113. }
  114. 100% {
  115. transform: translatez(-50px);
  116. }
  117. }

　　

※ 添加整提旋转动画
  1. .box.animate {
  2. animation: box-move ease 4s 0s infinite;
  3. }
  4.  
  5. @keyframes box-move {
  6. 0% {
  7. transform: rotatex(0deg) rotatey(0deg)
  8. }
  9. 50% {
  10. transform: rotatex(45deg) rotatey(45deg)
  11. }
  12. 100% {
  13. transform: rotatex(405deg) rotatey(405deg)
  14. }
  15. }

　　

动画转的我有点头晕

纯CSS绘制3D立方体的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  3. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  4. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  5. 碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

  6. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

随机推荐

  1. Scala学习（三）——集合

    基本数据结构 Scala提供了一些不错的集合. 数组 Array 数组是有序的,可以包含重复项,并且可变. val numbers = Array(1, 2, 3, 4, 5, 1, 2, 3, 4, ...

  2. LeetCode 236. 二叉树的最近公共祖先（Lowest Common Ancestor of a Binary Tree）

    题目描述 给定一棵二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义: “对于有根树T的两个结点u.v,最近公共祖先表示一个结点x,满足x是u.v的祖先且x的深度尽可能大. ...

  3. sshd_config已修改，ssh还是无法远程问题解决

    环境:vmware下的debian10.2 /etc/sshd/sshd_config 配置文件已经完成修改开启允许root账号登录配置 ssh远程返回如下信息: [Administrator.NIH ...

  4. P1533可怜的狗狗

    困死了,完全做不下去题 就当是对莫队最最基本的思想的一个复习叭(只有最最基本的思想,没有莫队) 传送 我们可以很容易的想到这题要用线段树. 60pts 此题要求某个区间里第K小的数,可以暴力的考虑对每 ...

  5. IDEA项目添加第三方依赖

    1.在项目WEB-INF文件夹下面新建一个lib文件夹并将我们需要的第三方jar包拷贝进去: Ctrl+Shift+Alt+S打开项目配置页面: 选择我们存放jar包的文件夹: 选择我们需要引入目标依 ...

  6. 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_07.入门案例中使用的组件介绍

    这里配置上注解的支持,相当于配置了上面的前端控制器.处理映射器这两个

  7. 慕课网_Java入门第二季

    第1章 类和对象 1-1 什么是类和对象 (07:36) 1-2 如何定义 Java 中的类 (07:18) 1-3 如何使用 Java 中的对象 (04:45) 1-4 练习题 1-5 Java 中 ...

  8. java：Oracle（聚合函数，多表查询，表之间的关系）

    1.聚合函数 --max,min,sum,avg,count,nvl(,) -- max:最大值 -- max既能取数字的最大值,也可以取字符串的最大值(英文字母排列顺序),根据场景实际意义来看,最好 ...

  9. idea 如何运行maven项目

    1:run→Edit configurations 2:配置tomcat,左边如果没有tomcat server的话,点击 “+”,选择tomcat  server→local,在右边server选项 ...

  10. linux建立ftp用户

    #!/bin/bash sleep 1 mkdir -p /ceshi/ userdel ceshi useradd -d /ceshi -s /sbin/nologin ceshi echo mim ...