纯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 而呈现千 ...
随机推荐
- 【转】如何在Oracle中复制表结构和表数据
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- linux挂载本地镜像
//创建挂载目录 mkdir /media/cdrom //挂载镜像 mount -t iso9660 /dev/cdrom /media/cdrom 提示:mount:block device /d ...
- Mysql 实用语句记录
都是工作中遇到的需求,但不是常用sql,特此记录,方便以后使用: 1.将指定列的数据拼起来存到某一列 UPDATE table_name SET b_col_name=CONCAT(b_col_nam ...
- Windows下的Crontab表达式解析DLL的使用
Linux的crontab工具特别的好用,正好现在工作总有好多定时执行的事 用Windows的定时任务觉得特别Low,哈哈,用C#写个任务触发器 然后再用上Crontab表达式解析DLL,觉得马上就高 ...
- ColorPicker 颜色选择器
用于颜色选择,支持多种格式. 基础用法 使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型. <div class="block"&g ...
- Selenium 2自动化测试实战21【调用JavaScript（控制浏览器的滚动条）】
一.调用JavaScript(控制浏览器的滚动条) WebDriver提供了execute_script()方法来执行JavaScript代码.用于调整浏览器滚动条位置的JavaScript代码如下 ...
- 四十九：数据库之Flask-SQLAlchemy下alembic的配置
准备工作 配置数据 创建迁移文件并映射到数据库 增加字段 删除字段
- 安装MySQL Enterprise Monitor
MySQL Enterprise Monitor是专门为MySQL数据库而设计的一款企业级监控,能非常好地与MySQL各方面特性相结合,包括:MySQL的关键性能指标.主机.磁 盘.备份.新特性相关以 ...
- java：struts框架2（方法的动态和静态调用，获取Servlet API三种方式（推荐IOC（控制反转）），拦截器，静态代理和动态代理（Spring AOP））
1.方法的静态和动态调用: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCT ...
- Redis 5.0
1.概述默认端口号:6379 redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(s ...