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. Java中InputStream 、 InputStreamReader 、 BufferedReader的区别

    1.InputStream.OutputStream 处理字节流的抽象类 InputStream 是字节输入流的所有类的超类,一般我们使用它的子类,如FileInputStream等. OutputS ...

  2. layui-open-上传文件

    <!--选择文件上传--> <script id="upload_file_dialog" type="text/html"> < ...

  3. swiper动态改变滑动内容

    假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1 body下面添加如下代码 <div class="swiper-container temp"> <d ...

  4. Linux 新手入门常用命令

    1,增加用户:useradd mylinux passwd mylinux 添加你的用户密码 2,切换用户: su otheruser   (注意这种切换方式只是临时的,本质工作目录还在原来的用户目录 ...

  5. 怎样修复grub开机引导(grub rescue)

    很多时候,特别是在linux调整分区后,开机重启时会出现         error : unknow filesystem         grub rescue>         的字样,系 ...

  6. C/C++标准有哪些？

                        1. C 时间 名称 标准制定组织 事件 1978 K&R标准 K&R <The C Programming Language>   ...

  7. PowerDNS Authoritative Server 3.3 发布

    PowerDNS Authoritative Server 3.3 发布,该版本改进了不同验证器的交互操作,修复了不少 bug. PowerDNS Authoritative Server (PDNS ...

  8. 初识WCF2

    参照: http://blog.csdn.net/songyefei/article/details/7371571 在上一篇中,我们在一个控制台应用程序中编写了一个简单的WCF服务并承载了它.先回顾 ...

  9. js 三元表达式的写法

    句式一. if(a) do_a elseif(b) do_b else do_c 转化为: =>a ? do_a : b ?do_b : do_c 句式二. if(a) do_a 转化为: =& ...

  10. laravel入门-01

    创建laravel应用 laravel new app_name 使用 PHP 内置 web server 驱动我们的网站 cd xxx/public php -S localhost:port 查看 ...