body{

    background-color: #000;

    margin:;

    padding:;

}

main{

    perspective: 800px;

}

.cube{

    transform-style: preserve-3d;

    position: relative;

    margin: 200px auto 0px;

    width: 400px;

    height: 400px;

    animation: spin 8s linear infinite;

    animation-play-state: paused;

}

.cube>div{

    background-color: blue;

    opacity: 0.3;

    position: absolute;

    outline: 3px solid #0af;

    width: 400px;

    height:400px;

}

.cube>div:nth-child(1){

    transform: translateZ(200px);

}

.cube>div:nth-child(2){

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

}

.cube>div:nth-child(3){

    transform: rotateY(90deg) translateZ(200px);

}

.cube>div:nth-child(4){

    transform: rotateY(-90deg) translateZ(200px);

}

.cube>div:nth-child(5){

    transform: rotateX(90deg) translateZ(200px);

}

.cube>div:nth-child(6){

    transform: rotateX(-90deg) translateZ(200px);

}

@keyframes spin{

    100%{transform: rotateY(-360deg);}

}

.cube:hover{

    animation-play-state: running;

}
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>纯 CSS 制作绕中轴旋转的立方体</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

<main>

    <div class="cube">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</main>

</body>

</html>

划重点

①给多个元素absolute形成重叠

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

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

.cube>div:nth-child(1){

    transform: translateZ(200px);

}

.cube>div:nth-child(2){

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

}

.cube>div:nth-child(3){

    transform: rotateY(90deg) translateZ(200px);

}

.cube>div:nth-child(4){

    transform: rotateY(-90deg) translateZ(200px);

}

.cube>div:nth-child(5){

    transform: rotateX(90deg) translateZ(200px);

}

.cube>div:nth-child(6){

    transform: rotateX(-90deg) translateZ(200px);

}

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

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

③margin:200px auto 0px;

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

⑤

animation: name duration timing-function delay iteration-count direction;
animation-play-state: paused;
animation-play-state: running;
@keyframes myfirst

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}
.cube:hover{

    animation-play-state: running;

}

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. MVC中学到的小知识(MVC中的跳转，传参)

    1.mvc中视图中的href="XXX",这个XXX是控制器地址,不是另一个视图.(这里的href语句只能转向控制器,不能直接转向视图),如果要实现转向视图,可以先转到控制器,然后 ...

  2. 面向对象（基础oop）之结构与数组高级

    大家好,我叫李京阳,,很高兴认识大家,之所以我想开一个自己的博客,就是来把自己所了解的知识点通过自己的话写一下,希望被博客园的朋友们点评和一起讨论一下,也希望从博客园中多认识一些软件开发人员!现在我开 ...

  3. 多线程-synchronized锁

    package 多线程.synchronized锁; /*. * * * * */ public class Sale implements Runnable { ; @Override public ...

  4. JAVA基础之——JDK包分析concurrent

    concurrent在哪儿:jdk\jre\lib\rt.jar package java.util.concurrent; 本文从特性.分类.扩展方面一一道来. 1 特性 包中包含大量有用的构建块, ...

  5. 1.Java设计模式-工厂模式

    1．简单工厂模式(Factory Method) 常用的工厂模式是静态工厂模式,利用static修饰方法,作为一种类似于常见的工具类Utils等辅助效果,一般情况下工厂类不需要实例化. //1.定义一 ...

  6. python3 利用pip安装ipython notebook

    python 3.6 ,因为不想安装anaconda,但是ipyhon notebook一直出错,所以搞好后特此纪念一下. 命令行输入pip install ipython[all], 安装ipyth ...

  7. Java 并发：Executor

    异常捕获 以前使用executor的时候,为了记录任务线程的异常退出会使用ThreadFactory来设置线程的UncaughtExceptionHandler,但是按照书上的验证发现,采用execu ...

  8. iView定制主题报错问题的解决方法

    按照iView官网来是这样的: 1. 在main.js当前目录下新建themes文件夹,里面新建一个叫blue.less的文件 2. 在mian.js里面引入blue.less文件 3. blue.l ...

  9. oracle基础-创建表空间

    一. 创建表空间的完整格式 CREATE [UNDO|TEMPORARY] TABLESPACE tablespace_name       DATAFILE 'path/filename' [SIZ ...

  10. 【MFC】CHtmlView或WebBrowser禁止脚本错误提示

    错误展示: 解决办法: 1.CHtmlView类或子类 CHtmlView::SetSilent(TRUE); 2.IWebBrowser2控件 IWebBrowser2::put_Silent(TR ...