使用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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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
PHPCMS的使用小结
2010/09/20 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
Python描述器descriptor详解
2015/02/03 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
公务员年总结的自我评价
2013/10/25 职场文书
物理教育专业毕业生推荐信
2013/11/03 职场文书
八年级物理教学反思
2014/01/19 职场文书
学生会部长竞聘书
2014/03/31 职场文书
大三学习计划书范文
2014/05/02 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers