CSS教程:CSS制作3D立方体

2016-02-20 00:10 25 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的CSS教程:CSS制作3D立方体教程,一起来看看吧!超容易上手~

【 tulaoshi.com - Web开发 】

无需JavaScript, imagery, canvas 或者SVG,就可以利用最新的CSS制作出3D立方体,这的确是一件让人难以想象的事情。

目前制作出来的效果,只有Firefox 3.5,Safari 3.2+,Google Chorme支持。下面来为大家列举出相关演示和代码。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

3D CSS

 

3D CSS

结果演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

单个静态3D立方体

支持浏览器:Safari 3.2+, Google Chrome, Firefox 3.5+

三个滑动的动态3D立方体

支持浏览器:Safari 4+, Google Chrome

怎么制作?

其实使用DIV容器的代码很简单,如下:

div class="cube"
div class="topFace"
divContent/div
/div
div class="leftFace"Content/div
div class="rightFace"Content/div
/div

CSS来控制

.cube {
position: relative;
top: 200px;
}
 
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
 
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
 
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}
 
.rightFace {
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
left: 200px;
}
 
.topFace div {
-webkit-transform: skewY(-30deg) scaleY(1.16);
-moz-transform: skewY(-30deg) scaleY(1.16);
background-color: #eee;
font-size: 0.862em;
}
 
.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
top: -158px;
left: 100px;
}

来源:http://www.tulaoshi.com/n/20160220/1631404.html

延伸阅读
立方体是非常常见的图形,如何做出一个立方体,还需要一定的美学知识。如怎么透视及设置光源等。这些事制作立体图形的重点所在。掌握好了,我们就可以快速做出真实的立体图形。 最终效果 1、按下键盘上的Ctrl+N组合键,或执行菜单栏上的“文件→新建”命令,打开“新建”对话框,设置参照下图所示。 2、选择“直线工具”(快捷...
标签: Web开发
CSS 按钮的效率远比基本图像的按钮的效率高得多,因为它们全部都是基于文本的。所有要用 XHTML 标记只是一个无序列表——CSS 样式负责其余部分。而且,你不需要任何 JavaScript 来交换图像以实现翻卷效果,因为 CSS 伪类(pseudoclass)能够让你为链接的每个状态(链接link、已访问visited、悬停hover、激活active)建立独立的样式。 纯 CSS ...
今天看了《Managed DirectX 9 Kick Start: Graphics and Game Programming 》有关加纹理的,下面我以我对书的理解谈谈如何 简单的向对立方体加纹理。有不对之处,请大家指正,谢谢。 首先我把原来的PositionColored类型的顶点改为PositionTextured,原因是显而易见的。 顺便提一句,CustomVertex里有2种大的顶点类型,一种是Transformed,一种...
前面一篇 手工 折纸 跟大家分享的是一个五彩的圆球体,这篇 手工 折纸 跟大家分享的是一个正立方体的手工折纸,正好一套呢,可以成对出现哦。各种用途和可以放置的场景前面都说过了,主要就是孩子们喜好和装点喜庆的会场吧。 需要的材料主要就是正方形的小纸片了,整个大的立方体是由很多个小纸片组合而成的。大家需要首先将一个个正方...
本教程介绍利用单像素的图形复制得到彩色色彩,然后再把色彩复制变形及调色组合成立方体。制作的方法比较简单,大家可以尝试一下。 最终效果 1、新建一个文档,大小随意(在此为500*500px),给背景填充蓝色(#152935)。 2、用一个大的软边画笔,前景黑色,在画布中间点一下,给画布增加深度。 3、随意打开一张图片,用单行选框工具...

经验教程

655

收藏

93
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部