利用CSS制作3D立方体

2016-02-17 04:46 9 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐利用CSS制作3D立方体,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - 平面设计 】

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

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

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

利用CSS制作3D立方体,PS教程,图老师教程网

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

 

3D CSS

结果演示

单个静态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/20160217/1578625.html

延伸阅读
立方体是非常常见的图形,如何做出一个立方体,还需要一定的美学知识。如怎么透视及设置光源等。这些事制作立体图形的重点所在。掌握好了,我们就可以快速做出真实的立体图形。 最终效果 1、按下键盘上的Ctrl+N组合键,或执行菜单栏上的“文件→新建”命令,打开“新建”对话框,设置参照下图所示。 2、选择“直线工具”(快捷...
今天看了《Managed DirectX 9 Kick Start: Graphics and Game Programming 》有关加纹理的,下面我以我对书的理解谈谈如何 简单的向对立方体加纹理。有不对之处,请大家指正,谢谢。 首先我把原来的PositionColored类型的顶点改为PositionTextured,原因是显而易见的。 顺便提一句,CustomVertex里有2种大的顶点类型,一种是Transformed,一种...
前面一篇 手工 折纸 跟大家分享的是一个五彩的圆球体,这篇 手工 折纸 跟大家分享的是一个正立方体的手工折纸,正好一套呢,可以成对出现哦。各种用途和可以放置的场景前面都说过了,主要就是孩子们喜好和装点喜庆的会场吧。 需要的材料主要就是正方形的小纸片了,整个大的立方体是由很多个小纸片组合而成的。大家需要首先将一个个正方...
方方正正的立方体很好看,大师很多人觉得很难折,其实不是的,纸立方体其实折的方法很简单,下面我就跟大家聊聊折一个漂亮的 折纸 立方体的方法,大家不妨来看看哦。 折一个漂亮的折纸立方体 需要的材料主要就是正方形的小纸片了,整个大的立方体是由很多个小纸片组合而成的。大家需要首先将一个个正方形的纸片折叠成一...
最终效果 1、制作之前,在头脑中要使物体的轮廓清晰化,我们可以利用辅助线如下图。 2、确定光源位置和反光部位,假设光源位于物体的右前方。 3、开始绘制高光,首先是线状光,推荐方法:路径描边。新建透明图层用钢笔工具选择路径模式,沿着轮廓辅助线临摹出线状路径如图1,进入路径面板右键高才的路径选择“路径描边”。隐藏辅...

经验教程

508

收藏

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