HTML5实践 -- 如何使用css创建三角形,使用CSS3创建3d四面体-阿里云开发者社区

开发者社区> bill.kang> 正文

HTML5实践 -- 如何使用css创建三角形,使用CSS3创建3d四面体

简介:   今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。原文地址:http://www.paulrhayes.com/2010-10/css-tetrahedron/。
+关注继续查看

  今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。原文地址:http://www.paulrhayes.com/2010-10/css-tetrahedron/

  demo预览地址:http://www.paulrhayes.com/experiments/pyramid/

  首先要和大家分享的是,如何使用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>

  运行效果:

  原理解析:

  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:

<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代码粘贴在一起,查看最终效果。

  代码里面有不懂的内容,大家可以给我留言。

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Tridiv:基于 Web 的 CSS 编辑器,创建炫丽 3D 图形
  Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状。它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果。使用 Tridiv 可以创造极其复杂的对象和动画。
709 0
Directx11教程(6) 画一个简单的三角形(2)
在上篇教程中,我们实现了在D3D11中画一个简单的三角形,但是,当我们改变窗口大小时候,三角形形状却随着窗口高宽比例改变而改变,如下图所示:           这是因为我们改变了窗口大小,但后缓冲大小在程序初始化时候,已经被指定,不随着窗口改变而改变,这样在视口映射下,我们所渲染的三角形就改变了形状。
861 0
使用 iosOverlay.js 创建 iOS 风格的提示和通知
  iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果。为了防止图标加载的时候闪烁,你需要预加载的图像资源。不兼容 CSS 动画的浏览器需要 jQuery 支持。浏览器兼容:IE7+, Google Chrome, Firefox, Opera, Desktop Safari, Mobile Safari — iPhone & iPad。
732 0
Effective前端(3)用CSS画一个三角形
来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观。你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦。
840 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载