纯CSS绘制3D立方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
width: 400px;
height: 400px;
border: 1px solid #cccccc;
} .box {
position: relative;
width: 100px;
height: 100px;
margin: auto;
margin-top: 150px;
transform-style: preserve-3d;
} .box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
transform-origin: center;
} .box div:nth-of-type(1) { } .box div:nth-of-type(2) {
background-color: yellow;
} .box div:nth-of-type(3) {
background-color: green;
} .box div:nth-of-type(4) {
background-color: blue;
} .box div:nth-of-type(5) {
background-color: black;
} .box div:nth-of-type(6) {
background-color: darkmagenta;
}
</style>
</head>
<body> <div class="container">
<div class="box animate">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
.box.animate div {
animation: ease 4s 0s infinite;
}
.box.animate div:nth-of-type(1) {
animation-name: box1-move;
}
.box.animate div:nth-of-type(2) {
animation-name: box2-move;
}
.box.animate div:nth-of-type(3) {
animation-name: box3-move;
}
.box.animate div:nth-of-type(4) {
animation-name: box4-move;
}
.box.animate div:nth-of-type(5) {
animation-name: box5-move;
}
.box.animate div:nth-of-type(6) {
animation-name: box6-move;
}
@keyframes box1-move {
0% {
transform: rotatex(0deg);
}
25% {
transform: rotatex(90deg);
}
50% {
transform: rotatex(90deg) translatez(50px);
}
100% {
transform: rotatex(90deg) translatez(50px);
}
}
@keyframes box2-move {
0% {
transform: rotatex(0deg);
}
25% {
transform: rotatex(90deg);
}
50% {
transform: rotatex(90deg) translatez(-50px);
}
100% {
transform: rotatex(90deg) translatez(-50px);
}
}
@keyframes box3-move {
0% {
transform: rotatex(0deg);
}
25% {
transform: rotatey(90deg);
}
50% {
transform: rotatey(90deg) translatez(50px);
}
100% {
transform: rotatey(90deg) translatez(50px);
}
}
@keyframes box4-move {
0% {
transform: rotatex(0deg);
}
25% {
transform: rotatey(90deg);
}
50% {
transform: rotatey(90deg) translatez(-50px);
}
100% {
transform: rotatey(90deg) translatez(-50px);
}
}
@keyframes box5-move {
0% {
}
25% {
transform: translatez(0px);
}
50% {
transform: translatez(50px);
}
100% {
transform: translatez(50px);
}
}
@keyframes box6-move {
0% {
}
25% {
transform: translatez(0px);
}
50% {
transform: translatez(-50px);
}
100% {
transform: translatez(-50px);
}
}
.box.animate {
animation: box-move ease 4s 0s infinite;
}
@keyframes box-move {
0% {
transform: rotatex(0deg) rotatey(0deg)
}
50% {
transform: rotatex(45deg) rotatey(45deg)
}
100% {
transform: rotatex(405deg) rotatey(405deg)
}
}
纯CSS绘制3D立方体的更多相关文章
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- 碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
随机推荐
- python3笔记十九：os和ospath模块
一:学习内容 os模块 ospath模块 获取指定目录下所有文件和目录 二:os模块 包含了普遍的操作系统功能,需要导入该模块:import os 当前所在位置目录结构为: 目录操作 1.获取当前目录 ...
- b站编程课程资源汇总
b站编程课程资源汇总 一.总结 一句话总结: b站的编程资源很多,而且很良心 二.编程课程资源汇总 b站看到的,分享给大家 https://www.bilibili.com/video/av50680 ...
- Git 合并两个分支内容
1,将开发分支代码合入到master中 git checkout dev #切换到dev开发分支 git pull git checkout master git merge dev #合并dev分支 ...
- jdbcTemplate的queryForList的使用方法
jdbcTemplate的queryForList的使用方法如下,它不一样的地方是,它获得的结果,会再放到一个map里去: List rows = jdbcTemplate.queryForList( ...
- oracle字段like多个条件
写oracle sql时有时候会有 and (字段 like ‘匹配串1’or 字段 like ‘匹配串2’or ...)这样的情况出现,下面提供一个简洁点的解决方案: and REGEXP_LIKE ...
- 下载excle文件之工具
创建万能的工具类,已备用 ExcelData.java 存放文件数据 package com.ulic.gis.dataCenter.util; import java.io.Serializable ...
- 【转】C++ typedef typename 作用
转:https://blog.csdn.net/zhangxiao93/article/details/50569924 and GOOD: https://blog.csdn.net/vanturm ...
- vuex里面的store架构
将store文件夹分为四个文件夹,分别是actions,getters,mutations,state. action:和mutatation功能是类似的,都是修改state里面的数据,区别是acti ...
- 什么是IntentService?有何优点?
一.IntentService 简介 IntentService 是 Service 的子类,比普通的 Service 增加了额外的功能.先看 Service 本身存在两个问题:Service 不会专 ...
- mysql linux环境
创建新用户 create user jnroot@'%' identified by 'Yc@edc#sJn';创建数据库 create database price_monitor DEFAULT ...