附上总的代码：

<!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. AC自动机小结

    专题链接 第一题--hdu2222 Keywords Search ac自动机的模板题,入门题.  题解 第二题--hdu2896 病毒侵袭   一类病毒的入门题,类似模板  题解 第三题--hdu3 ...

  2. 在 linux 上部署并运行 JavaFX 项目

    环境 redhat 6.4.eclipse安装JavaFX插件 项目详情及代码参见 在linux上配置并创建JavaFX项目 ,该部署即此文章中项目的部署 配置build.fxbuild 生成buil ...

  3. svn patch

    生成patch文件: svn diff > patchFile // 整个工程的变动生成patch 或svn diff file > patchFile // 某个文件单独变动的patch ...

  4. JavaScript实现输入验证（简单的用户注册）

    1.先写用户注册页面userrAdd.jsp <body> <center> <form name="f1" id="f1" ac ...

  5. flask笔记2-程序的基本结构

    第一个flask web程序 1.初始化(所有flask程序都必须创建一个程序实例,程序实例是Flask类的对象): from flask import Flask app = Flask(__nam ...

  6. 遇到 java.io.EOFException 异常的解决办法

    可以试着clean项目后再启动!原因未明

  7. windows7 64，32位下scrapy爬虫框架的环境搭建

    适用于python 2.7 64位安装 一.操作系统:WIN7 64位 二.python版本:2.7 64位(scrapy目前不支持3.x) 不确定位数的,看图 三.安装相关软件:(可以从我的百度网盘 ...

  8. MEF 生命周期PartCreationPolicy

    为什么要单独把这个生命周期捞出来单独说一说呢?因为我今天就被这个东东坑了一把……新加了一个界面,第二次打开界面的时候会报错“指定的元素已经是另一个元素的逻辑子元素”.好嘛,我一看,哟,感觉就是xaml ...

  9. JAVA方法03之动手动脑问题解决

    动手动脑1.当JAVA里定义的函数中去掉static后,怎么办?(如下程序,将square()函数的static去掉) public class SquareIntTest { public stat ...

  10. 突破php的imagecopyresampled 和imagecopyresized 实现图片马JPG

    编辑器加载中...之前有人发布了 利用PNG 图片上述压缩函数的方法 原理利用 PNG的结构IDAT chunks填充一句话webshell,并进行一套取模运算 详见: https://www.ido ...