附上总的代码：

<!DOCTYPE html>
<html>
<head>
<title>立方体</title>
<meta charset="utf-8">
<style type="text/css">
.SD{margin: 400px 400px;width: 300px;height: 300px;position: relative;transform-style: preserve-3d;transform: rotateX(30deg) rotateY(30deg);}
.face{width: 100%;height: 100%;border:3px solid red;position: absolute;}
.face:nth-child(1){
transform: rotateX(90deg) translateZ(150px);
}
.face:nth-child(2){
transform: rotateX(90deg) translateZ(-150px);
}
.face:nth-child(3){
transform: rotateY(90deg) translateZ(150px);
}
.face:nth-child(4){
transform: rotateY(90deg) translateZ(-150px);
}
.face:nth-child(5){
transform: translateZ(150px);
}
.face:nth-child(6){
transform: translateZ(-150px);
}
</style>
</head>
<body>
<div class="SD">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</body>
</html>

CSS之立方体绘画步骤的更多相关文章

  1. 纯CSS实现立方体旋转

    下面为通过CSS动画实现的立方体旋转,可以改变CSS代码中关键帧定义(@keyframes)来改变立方体的旋转方式 HTML部分: <body class="body"> ...

  2. css实现横向带箭头步骤流程效果

    通过纯css实现圆角的步骤流程效果,扩展性强,可以随意增加减少数量,兼容性ie6+. 具体代码: <style type="text/css"> ul{margin:0 ...

  3. css实现步骤条

    实现效果 html <ul class="steps"> <li class="active">申请完成</li> < ...

  4. 用CSS画小猪佩奇，你就是下一个社会人！

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...

  5. 用CSS画小猪佩奇，你就是下一个社会人！ js将“I am a coder”反转成 “coder a am I”，不许用split，join，subString，reverse；求解方法三

    用CSS画小猪佩奇,你就是下一个社会人!   欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...

  6. css中常见的属性-----在路上（14）

    一.css文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...

  7. CSS概念【记录】

    1.CSS语法 2.@规则 3.注释 4.层叠 5.优先级 6.继承 7.值 8.块格式化上下文 9.盒模型 10.层叠上下文 11.可替换元素 12.外边距合并 13.包含块 14.视觉格式化模型 ...

  8. django 1.9.7 css控制模板样式

    问题:css样式不能控制html样式(针对开发环境,不针对生产环境) 现象: django.template.exceptions.TemplateSyntaxError: Invalid block ...

  9. 高效率、简洁、CSS代码优化原则

    高效率.简洁.CSS代码优化原则 CSS学起来并不难,但在大型项目中,一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CS ...

随机推荐

  1. idea中配置eslint 静态代码检查

    配置: 1,安装依赖 sudo tnpm install eslint -g sudo tnpm install eslint-plugin-import -g sudo tnpm install e ...

  2. JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  3. vscode 与 python 的约会

    安装python 官网(https://www.python.org/downloads/)下载, 安装. (简单略过). 运行python代码 运行python代码的常见方式有三种: 运行pytho ...

  4. Security » Authorization » 基于资源的授权

    Resource Based Authorization¶ 基于资源的授权 68 of 73 people found this helpful Often authorization depends ...

  5. SQL与Mongodb聚合的对应关系(举例说明)

    SQL中的聚合函数和Mongodb中的管道相互对应的关系: WHERE $match GROUP BY $group HAVING $match SELECT $project ORDER BY $s ...

  6. Ridit分析

    对于有序分类资料,由于指标存在等级顺序,因此不能使用卡方检验,除了使用秩和检验之外,ridit检验也是分析有序分类资料的常用方法,属于非参数检验. ridit检验的基本做法是将一组有序分组资料转换成一 ...

  7. C#快捷键

    home:光标所在这一行的最前面 end:光标所在这一行的最后面 pg up:光标所在这一页最前一行的前面 pg dn:光标所在这一页最后一行的最后 shift+home:光标所在这一行之前的所有代码 ...

  8. 将1~n个整数按字典顺序进行排序，返回排序后第m个元素

    给定一个整数n,给定一个整数m,将1~n个整数按字典顺序进行排序,返回排序后第m个元素.n最大可为5000000.字典排序的含义为:从最高位开始比较.1开头的数字排在最前面,然后是2开头的数字,然后是 ...

  9. 自定义Spring Security权限控制管理（实战篇）

    上篇<话说Spring Security权限管理(源码)>介绍了Spring Security权限控制管理的源码及实现,然而某些情况下,它默认的实现并不能满足我们项目的实际需求,有时候需要 ...

  10. YY前端课程-自习

    1. 默认的浏览器字体 100% = 1em  =1rem =16px  =12pt em继承父元素,rem只继承html根元素 2. text-align水平对齐影响一个元素中文本的水平对齐方式,控 ...