用CSS3画出一个正方体

1.html代码

<div class="box"><ul><li>上</li><li>下</li><li>左</li><li>右</li><li>前</li><li>后</li></ul></div>

2.父元素定义的属性

* {margin: 0;padding: 0;}.box {width: 600px;height: 600px;background: #eee;position: relative;margin: 0 auto;perspective: 500px;  /*定义 3D 元素距视图的距离，子元素会获得透视效果*/}.box ul {width: 300px;height: 300px;border:1px #000 solid;list-style: none;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;transform-style: preserve-3d;  /*子元素将保留其 3D 位置*/}

3.子元素定义的属性

.box ul li{width: 300px;height: 300px;text-align: center;line-height: 300px;font-size: 48px;position: absolute;}.box ul li:nth-child(1){background:red;transform: translateY(-150px) rotateX(90deg);}.box ul li:nth-child(2){background:rgba(0,255,0,.5);transform: translateY(150px) rotateX(-90deg);}.box ul li:nth-child(3){background:rgba(0,0,255,.5);transform: translateX(-150px) rotateY(-90deg);}.box ul li:nth-child(4){background:rgba(255,255,0,.5);transform: translateX(150px) rotateY(90deg);}.box ul li:nth-child(5){background:rgba(255,0,255,.5);transform: translateZ(150px) ;}.box ul li:nth-child(6){background:rgba(0,255,255,.5);transform: translateZ(-150px) rotateY(180deg) ;}

4.呈现的效果

用CSS3画出一个正方体相关推荐

[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
如何用c语言画个叮当猫,如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
怎样快速画出一个正方体_小学数学非常有效的“画图”解题法，快速解题的“金钥匙”...
小学阶段的数学主要培养的是孩子的逻辑思维能力,是从形象思维逐步过度到抽象思维的过程,如果在小学阶段没有将基础打牢,那么等孩子上初中后面对更复杂的学习内容,就会变得更吃力. 在小学数学中,"画 ...
怎样快速画出一个正方体_素描教程：新手如何快速学会正方体
新手怎么画素描正方体? 系统学素描,一般情况下老师都会让你画一下正方体.那么对于我们新手来说,画正方体不难,难就在它的透视结构不好把握.下面我们来学习新手怎么画素描正方体. 结构素描画法画石膏像正方 ...
怎样快速画出一个正方体_word中绘制正方体的方法详解步骤
在我们使用word的时候,经常会遇到需要各种画形.如果使用网上搜索的图片有时不是很清晰,那么就自己动手画一个清晰的图形吧!正方体有好几种画法,下面由学习啦小编为大家介绍两种绘制方法,有需要的朋友可以来 ...
怎样快速画出一个正方体_人教版小学数学五年级下册长方体和正方体的体积教案、课件，公开课视频...
长方体和正方体体积 [教学目标]1.通过讲授,引导学生找出规律,总结出体积的公式. 2.指导学生运用公式正确计算长方体.正方体的体积. 3.培养学生积极思考.探索新知的思维品质. [教学重点]长方体. ...
怎样快速画出一个正方体_图形与几何---正方体
一．概念描述现代数学:正方体亦称立方体.它是一种正多面体.即棱长相等的长方体,因此亦称正六面体,如下图. 小学数学:2007年北京版教材第10册的第3页指出:长.宽.高都相等的长方体叫作正方体(也叫 ...
怎样快速画出一个正方体_Excel 怎样在EXCEL中快速制作出正方形/如何画多个正方体...
Excel 怎样在EXCEL中快速制作出正方形根据列宽:行高=1:5.85来设置即可. 如果要全部设置,全选单元格(ctrl A),分别在列头和行头右键,按1:5.85的比例分别设置列宽和行高. e ...
纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

用CSS3画出一个正方体

1.html代码

2.父元素定义的属性

3.子元素定义的属性

4.呈现的效果

用CSS3画出一个正方体相关推荐

最新文章

热门文章