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. [编程] C语言的结构体

    结构体 struct 结构体名{} 变量名; 结构体变量: struct person{ char *name; int age; float score; } student; 成员的获取和赋值 / ...

  2. 设置placeholder的字体颜色

    //设置字体颜色 [self.searchTextField setValue:[UIColor colorWithRed:0.50 green:0.50 blue:0.50 alpha:1.0] f ...

  3. 五、curator recipes之选举主节点Leader Latch

    简介 在分布式计算中,主节点选举是为了把某个进程作为主节点来控制其它节点的过程.在选举结束之前,我们不知道哪个节点会成为主节点.curator对于主节点选举有两种实现方式,本文示例演示Latch的实现 ...

  4. js for循环中点击事件中无法获取每一个i值的问题

    好像是第二次遇到这个问题,必须要总结一下!! <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  5. JavaScript & jQuery & Bootstrap

    一.前言 javascript 简称 JS  与java编程语言 没有什么关系 JavaScript: {核心(ECMAScript) 文档对象模型(DOM) Document object mode ...

  6. C语言——循环队列和链队列的基本运算

    // 循环队列#include <stdio.h> #include "SeqQue.h" // 循环队列的基本运算 /* const int maxsize = 20 ...

  7. 一键清理 Nexus 中无用的 Docker 镜像

    现许多团队使用 Nexus 来管理 Docker 镜像,产品不断迭代,镜像仓库占用的磁盘空间也越来越大.由于 Nexus 的控制台并未提供批量操作镜像功能,清理镜像十分不便.本文分享一个清理 Nexu ...

  8. MySQL查询高速缓冲

    对mysql的优化不在行,搞过几次优化,但是都不是很理想,还是浪费资源太多.一直发现我的mysql的缓存命中率极差,情况良好的时候到达过60-70%,但是运行时间一长,只有10-20%.查了一些资料, ...

  9. Android MVC模式和MVP模式的区别

    MVC模式: 1. MVC的所有通信都是单向的. 2. view传送指令到controller(用户也可以直接将指令传到controller). 3. controller完成业务逻辑后要求model ...

  10. 上海ctf2017 pwn100 && pwn200

    前言 分析的 idb 文件在这: https://gitee.com/hac425/blog_data/tree/master/shanghaictf pwn100 程序是一个经典的 堆管理程序,基本 ...