利用CSS制作3D立方体

我是被遗忘者2

我是被遗忘者2

2016-02-17 04:46

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

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

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

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

 

3D CSS

结果演示

单个静态3D立方体

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

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

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

怎么制作?

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

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

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

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

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;
}

展开更多 50%)
分享

猜你喜欢

利用CSS制作3D立方体

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
利用CSS制作3D立方体

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

Web开发
CSS教程:CSS制作3D立方体

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

css3 transform 3d 使用css3创建动态3d立方体(html5实践)

Web开发
css3 transform 3d 使用css3创建动态3d立方体(html5实践)

Photoshop3D工具制作旋转的立方体

PS PS基础
Photoshop3D工具制作旋转的立方体

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

利用单像素图形复制制作彩色立方体

设计创意
利用单像素图形复制制作彩色立方体

Flash CS4 3D工具打造滚动的照片立方体

FLASH flash教程 autocad教程
Flash CS4 3D工具打造滚动的照片立方体

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

设计技巧:VISSUMO的Logo设计过程

设计技巧:VISSUMO的Logo设计过程

相册设计:多样化理念打造全新主题样册

相册设计:多样化理念打造全新主题样册
下拉加载更多内容 ↓