纯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 而呈现千 ...
随机推荐
- ionic1使用imagepicker在安卓手机上闪退问题
在上一篇文章中,提到了如何在ionic1中使用imagepicker插件,并且实现该插件显示中文(汉化)问题有兴趣可以看看:ionic1使用ImagePicker插件并且显示中文(汉化) 1.这次要解 ...
- [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件
使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...
- linux输出与查看的几种方式
输出的几种方式:echo/ tee echo "postgres install Failed !!!!!!" | tee -a "$Install_log"# ...
- C++入门经典-例5.9-使用空类型指针执行函数
1:运行代码: // 5.9.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- linux下快速查找文件(转载)
权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xxmonstor/article/deta ...
- SpringBoot启动加载yml配置文件出现编码格式错误
Caused by: org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input l ...
- UNITY相关的一些新功能，新想法
1,lua profiler for unity : https://github.com/ElPsyCongree/LuaProfiler-For-Unity 参考文章:https://blog.c ...
- Docker-----deepin系统下docker安装registry
环境说明 一个坑逼的环境,也不能说坑逼,国产化的需求嘛. root@node22:/registry# uname -a Linux node22 4.4.15-deepin-aere #137 SM ...
- 第四章 SpringCloud之Eureka-Client实现服务(Jpa，H2)
1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- oracle 12 安装
oracle 12 第二版本安装 下载地址 https://www.oracle.com/technetwork/cn/middleware/webcenter/content/downloads/ ...