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. [javaSE] 数据结构（二叉查找树-插入节点）

    二叉查找树(Binary Search Tree),又被称为二叉搜索树,它是特殊的二叉树,左子树的节点值小于右子树的节点值. 定义二叉查找树 定义二叉树BSTree,它保护了二叉树的根节点BSTNod ...

  2. JS 浮点数计算

    一.从String中解析浮点数 parseFloat(string) 语法说明 parseFloat是个全局函数,不属于任何对象. parseFloat将它的字符串参数解析成为浮点数并返回.如果在解析 ...

  3. 【SSH网上商城项目实战30】项目总结

      转自:https://blog.csdn.net/eson_15/article/details/51479994 0. 写在前面 项目基本完成了,加上这个总结,与这个项目相关的博客也写了30篇了 ...

  4. 最短路问题（floyd算法）（优化待续）

    问题描述: 最短路问题(short-path problem):若网络中的每条边都有一个数值(长度.成本.时间等),则找出两节点(通常是源节点和阱节点)之间总权和最小的路径就是最短路问题.最短路问题是 ...

  5. Spring入门（三）— AOP注解、jdbc模板、事务

    一.AOP注解开发 导入jar包 aop联盟包. aspectJ实现包 . spring-aop-xxx.jar . spring-aspect-xxx.jar 导入约束 aop约束 托管扩展类和被扩 ...

  6. Inside the C++ Object Model：构造语意（chapter5）

    看到构造语意的其中一节“继承体系下的对象构造”(5.2节)的最后,看来原文,发现侯杰的翻译有问题,怪不得读起来不顺. What about when providing an argument for ...

  7. Windows下多个JDK版本之间的切换

    一.JDK版本切换批处理脚本   我们平时在window上做开发的时候,可能需要同时开发两个甚至多个项目,有时不同的项目对JDK的版本要求有区别,这时候我们可能会在一台电脑上安装多个版本的JDK,如下 ...

  8. Java常见异常类

    NullpointException(空指针异常)ClassNotFoundException(类找不到异常)ClassCastException(类型转换异常)IllegalArgumentExce ...

  9. bootstrap框架怎么在html页面加载使用

    今天敲代码的时候,正好碰到这个问题. 与大家分享这个解决方法:     1/7 到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的CSS.JavaScript文件,另外还包含 ...

  10. centos配置网络

    [root@localhost ~]# vi /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE="eth0"BOOTPROTO=&qu ...