使用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透明属性介绍
Apr 12 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 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
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
设定php简写功能的方法
2019/11/28 PHP
新手入门常用代码集锦
2007/01/11 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python 爬虫模拟登陆知乎
2016/09/23 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
python跨文件使用全局变量的实现
2020/11/17 Python
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
反洗钱宣传活动总结
2014/08/26 职场文书
赔偿协议书范本
2014/09/12 职场文书
员工工作表现自我评价
2015/03/06 职场文书
《实心球》教学反思
2016/02/23 职场文书