使用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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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
如何删除多级目录
2006/10/09 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python实现贪吃蛇游戏
2020/03/21 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
军训自我鉴定
2014/01/22 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2014年统战工作总结
2014/12/09 职场文书
补充协议书
2015/01/28 职场文书
总结会主持词
2015/07/02 职场文书
我的生日感言
2015/08/03 职场文书
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
Android自定义双向滑动控件
2022/04/19 Java/Android
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS