使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)


Posted in HTML / CSS onJanuary 06, 2013

今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。 
首先要和大家分享的是,如何使用div+css创建三角形。在这里我先把相关代码粘贴出来,然后再为大家讲解原理。
html

复制代码
代码如下:

<div id="pyramid">
<div></div>
</div>

css
复制代码
代码如下:

<style type="text/css">
#pyramid {
position: relative;
margin: 100px auto;
height: 500px;
width: 100px;
}
#pyramid > div {
position: absolute;
border-style: solid;
border-width: 200px 0 200px 346px;
}
#pyramid > div:after {
position: absolute;
content: "Triangle";
color: #fff;
left: -250px;
text-align: center;
}
#pyramid > div:first-child {
border-color: #ff0000 transparent #ff0000 rgba(50, 50, 50, 0.6);
}
</style>
 
运行效果
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
原理解析:
html代码中我们定义了两个div,外部div是容器对象,内部div用来生成三角形。css代码中,我们没有为内部div设置宽度和高度,只设置了border三个边的宽度(上、下和左)。通过为三个边设置不同颜色,他们会分别变成三个不同的三角形。
这时,我们只需要简单的将上下两边的颜色设置为透明色,一个等边三角形就出现了。
复制代码
代码如下:

#pyramid > div:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}

效果图:
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践) 
其中,红圈所示的地方就是内部div所在位置。他是个看不见的,0宽度0高度,但又实际存在的对象。
我们接下来要讲的是如何实现3d四面体和如何创建动画。
首先还是粘贴相关的代码。
html:
复制代码
代码如下:

<div id="pyramid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

css
复制代码
代码如下:

<style type="text/css">
#pyramid {
position: relative;
margin: 100px auto;
height: 500px;
width: 100px;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 10s linear infinite;
-webkit-transform-origin: 116px 200px 116px;
-moz-transform-style: preserve-3d;
-moz-animation: spin 10s linear infinite;
-moz-transform-origin: 116px 200px 116px;
-ms-transform-style: preserve-3d;
-ms-animation: spin 10s linear infinite;
-ms-transform-origin: 116px 200px 116px;
transform-style: preserve-3d;
animation: spin 10s linear infinite;
transform-origin: 116px 200px 116px;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@-ms-keyframes spin {
from {
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes spin {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
#pyramid > div {
position: absolute;
border-style: solid;
border-width: 200px 0 200px 346px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
#pyramid > div:after {
position: absolute;
content: "Triangle";
color: #fff;
left: -250px;
text-align: center;
}
#pyramid > div:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
-webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
-moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
-ms-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
}
#pyramid > div:nth-child(2) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
-webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
-moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
-ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
}
#pyramid > div:nth-child(3) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
-webkit-transform: rotateX(60deg) rotateY(19.5deg);
-moz-transform: rotateX(60deg) rotateY(19.5deg);
-ms-transform: rotateX(60deg) rotateY(19.5deg);
transform: rotateX(60deg) rotateY(19.5deg);
}
#pyramid > div:nth-child(4) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
-webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
-moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
-ms-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
}
</style>

现在开始相关代码的讲解。
html代码和之前的差不多,就是多了三个div,分别作为四面体的另外三个面。
css代码中,我们使用 #pyramid > div:nth-child(n) 寻找到三面体的四个面,设置border四个边的颜色,将他们分别定义成三角形。通过transform属性的rotateX,rotateY,translateX,translateY和translateZ方法,设置他们在3维空间中的角度、朝向和位置。这里涉及到很多数学知识,大家需要去补充相关知识。

通过上述设置,四面体就形成了。接下来就是为其添加动画效果。这里使用的东西也很简单,就是animation和keyframes。css3相关属性,大家可以到http://www.w3schools.com/css3/default.asp站点去学习,我这里就不做过多讲解了。

本文到此为止,大家可以把html和css代码粘贴在一起,查看最终效果。
代码里面有不懂的内容,大家可以给我留言。

HTML / CSS 相关文章推荐
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 #HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 #HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 #HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 #HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 #HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 #HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 #HTML / CSS
You might like
用JavaScript隐藏控件的方法
2009/09/21 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
jquery使用经验小结
2015/05/20 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python3获取url文件大小示例代码
2019/09/18 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
北京某公司的.net笔试题
2014/03/20 面试题
人身损害赔偿协议书格式
2014/11/01 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
Python学习开发之图形用户界面详解
2021/08/23 Python
Golang 实现WebSockets
2022/04/24 Golang