html5 3d原理,使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。
首先要和大家分享的是,如何使用div+css创建三角形。在这里我先把相关代码粘贴出来,然后再为大家讲解原理。
html:
复制代码代码如下:
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);
}
运行效果:
原理解析:
html代码中我们定义了两个div,外部div是容器对象,内部div用来生成三角形。css代码中,我们没有为内部div设置宽度和高度,只设置了border三个边的宽度(上、下和左)。通过为三个边设置不同颜色,他们会分别变成三个不同的三角形。
这时,我们只需要简单的将上下两边的颜色设置为透明色,一个等边三角形就出现了。
复制代码代码如下:
#pyramid > div:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
效果图:
其中,红圈所示的地方就是内部div所在位置。他是个看不见的,0宽度0高度,但又实际存在的对象。
我们接下来要讲的是如何实现3d四面体和如何创建动画。
首先还是粘贴相关的代码。
html:
复制代码代码如下:
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);
}
现在开始相关代码的讲解。
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代码粘贴在一起,查看最终效果。
代码里面有不懂的内容,大家可以给我留言。
html5 3d原理,使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)相关推荐
- HTML之CSS画三角形原理,纯CSS写三角形样式集合(原理解析)
一.实现原理 在css3中,我们主要使用的是一个transparent的属性,意思是透明的,比如我们将字体设置为黑色会写color:black,那么如果想把字体的颜色设置为透明,我们可以写color: ...
- HTML之CSS画三角形原理,使用css画三角形的方法代码
用纯css画个三角形以下是源代码: ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/ ...
- html5表单的css修饰,如何使用CSS3美化HTML5表单
目前表单格式如下: #redemption { width: 100%; font-family: 'ColaborateThinRegular'; font-weight: 400; } #rede ...
- html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码
一款JS+CSS3交互式拖动滑块选择工资条代码,可以托工工资下面的滑块来实时改变工资的数值大小,除了数字变化的同时还有一个颜色的平滑变化,当数值到最大值时,有一个文字的摆动动画特效. 查看演示 下载资 ...
- HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
- HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
- HTML5七夕情人节表白网页抖音超火的樱花雨3D相册 HTML+CSS+JavaScript
HTML5七夕情人节表白网页????抖音超火的樱花雨3D相册???? HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱 ...
- HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是 ...
- HTML5七夕情人节表白网页(烂漫的空中散落的花瓣3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤烂漫的空中散落的花瓣3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表 ...
最新文章
- express 源码阅读(全)
- linux下shell脚本论文,Linux下Shell脚本编程
- JAVA知识基础(十一):异常
- ai建立使用图案_ai自定义图案的方法详解步骤图
- 深入浅出看懂AlphaGo Zero - PaperWeekly 第51期
- 判断整除(信息学奥赛一本通-T1195)
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十五) —— jQuery Mobile 与响应式
- 多目标跟踪全解析,全网最全
- php 单例 重连,PHP单例模式详解
- 对视频中车辆车牌进行识别并圈出
- soap python_Zeep: Python SOAP 客户端
- 项目上线质量如何评估
- 【面霸系列 - 3】初级java如何挖掘自身的优势
- C Prime plus 第七章练习题
- 数据挖掘课程笔记--关联分析
- catia利用宏批量改名的方法_catia怎么批量改名-catia利用宏批量改名的方法 - 河东软件园...
- 移动端知网下文献并投屏PC端阅读
- 北京大学计算机研究生怎么样,北京大学计算机专业在职研究生怎么样?
- 水仙花数的while方法
- monthly rollup和security only的区别
热门文章
- 字符串ip地址和数值ip转换
- android脚本实现自动捉妖,一起来捉妖自动行走辅助怎么用 自动行走辅助详解[多图]...
- 联发科android11基线,零时差适配安卓11!ColorOS 11升级公测版体验:丝滑顺畅
- unity3d android 路径动画制作,Lesson11.Unity路径动画、路径变形动画实现方式
- Excel·VBA文本按分隔获取函数
- 路径规划 | 图搜索算法:JPS
- 区块链技术,能帮你买到心仪的房子吗?
- 突然,我想恋爱了!!
- 他曾经复读才考上三本,如今让华为开出201万年薪(其实还拒绝了360万offer)...
- Unity坐标系 左手坐标系