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. js延迟加载优化页面响应速度

    网页打开速度是衡量网站性能的一个极为重要的指标,今天就来说说如何通过JS延迟加载的方式提高页面响应速度: JS延迟加载的 含义:即等页面加载完成之后再加载 JavaScript 文件.作用:JS延迟加 ...

  2. 利用webstorm 快捷创建标签案例：

    利用webstorm 快捷创建标签案例: .wrapper>(.sWrapper>input[class='sText']+span[class= 'btn']*3)+.flWrapper ...

  3. COCI2017-2018-2 San

    题意 有\(n \leq 40\)个节点,每个节点有权值\(H \leq 1e9\)和贡献\(v \leq 1e9\),从任意一个点可以向右跳到一个权值不小于它的节点,并获得该点贡献 可以从任意一个点 ...

  4. jsp页面乱码

  5. JSTL总结摘要

    一 概述 1.什么是JSTL? JSP Standard Taglib,一个定义了一系列标签的标签库,以取代在JSP页面中嵌套的java代码,经常与EL结合使用,使页面风格统一,维护方便. JSTL标 ...

  6. QQ 聊天机器人小薇 2.1.0 发布！

    本次发布加入了支持茉莉机器人,并且更容易搭建开发环境,在线显示登录二维码~ 简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 QQ 群消息 ...

  7. 【javascript】javasrcipt设计模式之状态模式

    使用场景 解决多个[ifelse]嵌套,将其封装成若干个方法 区分事物内部的状态,事物内部的状态的改变往往会带来事物的行为的改变 简单的多个状态直接切换的时候 //两个状态之间的切换,使用if-els ...

  8. C++学习笔记(7)----类的数组中构造函数和析构函数的调用顺序

    C++类的数组中构造函数和析构函数的调用顺序(2) 对于如下的代码: #include<iostream> using namespace std; class CBase { priva ...

  9. 【html/css】模态框的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. PyCharm2018 安装及破解方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012278016/article/details/81738676 目录 1>. 安装 2& ...