使用CSS画一个简单的立方体

用CSS实现一个简单的立方体：

可以使用弹性盒子模型，先对父级div进行立体化（3D）操作，然后对多个子div进行操作（翻转，平移等），还可以给父级div加上CSS动画，使整体更加酷炫。

大体效果如图：

其中我对子div使用了透明度效果opacity，使其可以看到整体情况。大家如果感兴趣，可以在子div中加入img标签添加图片，然后将opacity效果删除，就会得到个图片构成的立方体。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cube</title><style>.cube{width: 1000px; height: 1000px;background-color: white;transform: rotateX(-45deg) rotateY(45deg);transform-style: preserve-3d;animation: OK 3s ease  infinite  backwards;}.front{width: 200px;height: 200px;background-color:red ;opacity: 0.5;position: absolute;right: 500px;bottom: 300px;transform: translateZ(200px);}.bottom{width: 200px;height: 200px;background-color:rgb(255, 179, 0) ;opacity: 0.5;position: absolute;right: 500px;bottom: 300px;transform: rotateX(90deg)translateY(100px)translateZ(-100px);}.over{width: 200px;height: 200px;background-color:rgb(77, 255, 0) ;opacity: 0.5;position: absolute;right: 500px;bottom: 300px;transform: rotateX(90deg)translateY(100px)translateZ(100px);}.after{width: 200px;height: 200px;background-color:rgb(0, 213, 255) ;opacity: 0.5;position: absolute;right: 500px;bottom: 300px;}.left{width: 200px;height: 200px;background-color:rgb(47, 0, 255) ;opacity: 0.5;position: absolute;right: 500px;bottom: 300px;transform: translateZ(100px)translateX(-100px)rotateY(90deg);}.right{width: 200px;height: 200px;background-color:rgb(217, 0, 255) ;opacity: 0.5;position: absolute;right: 500px;bottom: 300px;transform: translateZ(100px)translateX(100px)rotateY(90deg);}@keyframes OK{0%{transform: rotateX(0deg)rotateY(0deg);}100%{transform: rotateX(360deg)rotateY(360deg);}}</style>
</head>
<body><div class="cube"><div class="front"></div><div class="bottom"></div><div class="after"></div><div class="over"></div><div class="left"></div><div class="right"></div></div>
</body>
</html>

使用CSS画一个简单的立方体相关推荐

[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
html如何绘制棒棒糖,css画一个棒棒糖的实例代码
背景:每天进步一点点,多积累一点点.就会越来越棒代码: 棒棒糖用css画一个棒棒糖要求: 1:棒棒糖中间文字为水平居中 2:不得少于三层颜色 .round{ width: 100px; heig ...
Directx11教程(6) 画一个简单的三角形(2)
在上篇教程中,我们实现了在D3D11中画一个简单的三角形,但是,当我们改变窗口大小时候,三角形形状却随着窗口高宽比例改变而改变,如下图所示: 这是因为我们改变了窗口大小,但后缓冲大小在程序初始化时候, ...
用ggplot包画一个简单饼图
用ggplot包画一个简单饼图首先用library函数加载ggplot2包 1 2 3 4 library(ggplot2) library(dplyr) library(tidyr) librar ...
如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
[css] 用css画一个太阳
[css] 用css画一个太阳 // css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: ...
[css] 请使用css画一个圆，方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...

使用CSS画一个简单的立方体

使用CSS画一个简单的立方体相关推荐

最新文章

热门文章