1. body{
  2.     background-color: #000;
  3.     margin:;
  4.     padding:;
  5. }
  6. main{
  7.     perspective: 800px;
  8. }
  9. .cube{
  10.     transform-style: preserve-3d;
  11.     position: relative;
  12.     margin: 200px auto 0px;
  13.     width: 400px;
  14.     height: 400px;
  15.     animation: spin 8s linear infinite;
  16.     animation-play-state: paused;
  17. }
  18. .cube>div{
  19.     background-color: blue;
  20.     opacity: 0.3;
  21.     position: absolute;
  22.     outline: 3px solid #0af;
  23.     width: 400px;
  24.     height:400px;
  25. }
  26. .cube>div:nth-child(1){
  27.     transform: translateZ(200px);
  28. }
  29. .cube>div:nth-child(2){
  30.     transform: rotateY(180deg) translateZ(200px);
  31. }
  32. .cube>div:nth-child(3){
  33.     transform: rotateY(90deg) translateZ(200px);
  34. }
  35. .cube>div:nth-child(4){
  36.     transform: rotateY(-90deg) translateZ(200px);
  37. }
  38. .cube>div:nth-child(5){
  39.     transform: rotateX(90deg) translateZ(200px);
  40. }
  41. .cube>div:nth-child(6){
  42.     transform: rotateX(-90deg) translateZ(200px);
  43. }
  44. @keyframes spin{
  45.     100%{transform: rotateY(-360deg);}
  46. }
  47. .cube:hover{
  48.     animation-play-state: running;
  49. }
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>纯 CSS 制作绕中轴旋转的立方体</title>
  6.     <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <main>
  10.     <div class="cube">
  11.         <div></div>
  12.         <div></div>
  13.         <div></div>
  14.         <div></div>
  15.         <div></div>
  16.         <div></div>
  17.     </div>
  18. </main>
  19. </body>
  20. </html>

划重点

①给多个元素absolute形成重叠

②transform: rotateY(180deg) translateZ(200px);和transform: translateZ(200px)  rotateY(180deg);

先后的不同，有巨大区别！

  1. .cube>div:nth-child(1){
  2.     transform: translateZ(200px);
  3. }
  4. .cube>div:nth-child(2){
  5.     transform: rotateY(180deg) translateZ(200px);
  6. }
  7. .cube>div:nth-child(3){
  8.     transform: rotateY(90deg) translateZ(200px);
  9. }
  10. .cube>div:nth-child(4){
  11.     transform: rotateY(-90deg) translateZ(200px);
  12. }
  13. .cube>div:nth-child(5){
  14.     transform: rotateX(90deg) translateZ(200px);
  15. }
  16. .cube>div:nth-child(6){
  17.     transform: rotateX(-90deg) translateZ(200px);
  18. }

先在中点进行旋转，随后分别向各自变化后的Z方向推进200px；

而不是集体推进200px后在中点进行旋转。

③margin:200px auto 0px;

④3D舞台元素对视角的作用决定性（一个类似body的大背景座位舞台元素起到对屏幕更真实的效果）

⑤

  1. animation: name duration timing-function delay iteration-count direction;
    animation-play-state: paused;
    animation-play-state: running;
  1. @keyframes myfirst
  2. {
  3. 0%   {background: red; left:0px; top:0px;}
  4. 25%  {background: yellow; left:200px; top:0px;}
  5. 50%  {background: blue; left:200px; top:200px;}
  6. 75%  {background: green; left:0px; top:200px;}
  7. 100% {background: red; left:0px; top:0px;}
  8. }
  1. .cube:hover{
  2.     animation-play-state: running;
  3. }

No.5 - 纯 CSS 制作绕中轴旋转的立方体的更多相关文章

  1. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  2. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  4. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  5. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  6. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  7. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  8. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  9. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

随机推荐

  1. Class类文件结构简介

    Java跨平台的基础 各种不同平台的虚拟机与所有平台都统一使用的程序存储格式——字节码(ByteCode)是构成平台无关性的基石,也是语言无关性的基础.Java虚拟机不和包括Java在内的任何语言绑定 ...

  2. 简单介绍aspose-words-18.10-jdk16做导出word

    今天在搞那个用aspose words for java做导出word的功能,顺便简单介绍这个怎么用,我有两个版本的破解版,就都做简单介绍怎么用 警告:请勿用于商业用途,仅供学习研究使用,如有任何版权 ...

  3. 使用Tensorflow和MNIST识别自己手写的数字

    #!/usr/bin/env python3 from tensorflow.examples.tutorials.mnist import input_data mnist = input_data ...

  4. 中南月赛 B题 Scoop water

    Problem B: Scoop water Time Limit: 2 Sec  Memory Limit: 128 MBSubmit: 261  Solved: 57[Submit][Status ...

  5. oauth2.0授权协议

    参考文章 一.OAuth是什么? OAuth的英文全称是Open Authorization,它是一种开放授权协议.OAuth目前共有2个版本,2007年12月的1.0版(之后有一个修正版1.0a)和 ...

  6. python单继沿用父类属性的两种方法

    方法一 在子类中用父类调用其init方法(不建议) 方法二 在子类中使用super获得父类的方法 class Aaimal(object): type_name = '动物类' def __init_ ...

  7. POJ P2104 K-th Number

    You are working for Macrohard company in data structures department. After failing your previous tas ...

  8. Linux VPS主机利用Crontab实现定时重启任务

    第一.安装Crontab可执行环境 一般的VPS/服务器是支持的,但是有些可能没有支持就需要我们来给予安装. A - centos系统 #安装Crontab yum install vixie-cro ...

  9. 关于修改bug的思考

     作者:朱金灿 来源:http://blog.csdn.net/clever101 有软件就有bug,这意味着软件研发不仅仅是新功能开发,更要拿出相当一部分精力去修改bug.但基本很多软件开发者并 ...

  10. axios 同步问题

    Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中(这是官方文档给出的一个解释说明) 它的主要作用是向后台发起异步请求,还有在请求中做更多的可控功能 1. ...