如何利用python画三棱锥_玩转CSS 3D -正四面体与正六面体
我们理解了CSS 3D的个中原理之后,废话就不用多说,直接来画正多面体吧!只要正多面体可以画出来,基本上在CSS 3D的领域里,大概就没甚么难得倒我们了。
首先看一下百度百科对于正多面体的介绍:“多面体,或称柏拉图立体,指各面都是全等的正多边形且每一个顶点所接的面数都是一样的凸多面体。”简单来说,就是非常对称的立方体,而且每一个面都是由正多边形组成,因此在这一篇,将会画出正四面体、正六面体。
正六面体
要绘制正多面体,第一个一定要先画正六面体,为什么呢?因为正六面体就是我们熟知的正立方体,夹角都是90度,也是最容易理解的形状(就算有写少许错,好像还是画得出来…)
首先我们要先在space里头放入六个正方形,分别给予box1到box6的类别名称识别,并写上1到6来确定翻转是否为正面朝外(朝内的话文字就会是反过来的)。
接着对camera、space和这些box做基本的CSS定义,记得box的position要设为absolute,才不会互相挤压。
.camera{
width:200px;
height:200px;
perspective-origin:center center;
-moz-perspective-origin:center center;
-webkit-perspective-origin:center center;
perspective:500px;
-moz-perspective:500px;
-webkit-perspective:500px;
}
.space{
position:relative;
width:100%;
height:100%;
border:1px dashed #000;
transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
.space div{
position:absolute;
width:100px;
height:100px;
font-size:50px;
text-align:center;
line-height:100px;
}
完成后先来看box1,box1最简单,只要将它位移到space的中间即可。
.box1{
background:rgba(255,0,0,.2);
transform:translateX(50px) translateY(50px);
}
box2除了移到中间,还必须要旋转90度,这时候就要使用transform-origin的属性,这可以设定物体作变化时要以自身的哪一点为主,设定不同的位置,旋转90度之后就会在不同的位置,这里我们先把box2水平位移150px,然后把变换的X定位在左侧,旋转后就会可以顺利地接在box1旁边。
.box2{
background:rgba(255,255,0,.2);
transform-origin:left top;
transform:translateX(150px) translateY(50px) rotateY(90deg);
}
box3刚好在box1的正对面,所以只要旋转180度即可,但很重要的是旋转之后整个Z轴会跟着旋转180度,为了避免错乱,先把box3往Z轴后面移动100px,旋转后就会正常。
.box3{
background:rgba(0,255,0,.2);
transform:translateX(50px) translateY(50px) translateZ(-100px) rotateY(180deg);
}
box4和box2类似,不过要将旋转的中心点移到右侧,也因为移到右侧的缘故,所以我们要先进行X的位移。
.box4{
background:rgba(255,0,255,.2);
transform-origin:right top;
transform:translateX(-50px) translateY(50px) rotateY(-90deg);
}
box5在上方,box6在下方,用跟box1到box4同样的方法,只是这次是要绕着X轴旋转。
.box5{
background:rgba(0,0,255,.2);
transform-origin:center bottom;
transform:translateX(50px) translateY(-50px) rotateX(90deg);
}
.box6{
background:rgba(0,255,255,.2);
transform-origin:center top;
transform:translateX(50px) translateY(150px) rotateX(-90deg);
}
完成之后应该就会顺利地看到一个正六面体,这时候我们可以改变camera的perspective,可以更加清楚。
我们可以在space套用animate的效果,透过space的旋转,仿佛就是一个正立方体在旋转啰!
.space{
position:relative;
width:100%;
height:100%;
-webkit-transform-style:preserve-3d;
-webkit-transform-origin:center center -50px;
-webkit-animation:s 4s linear infinite;
}
@-webkit-keyframes s{
0%{
-webkit-transform:rotateY(0);
}
100%{
-webkit-transform:rotateY(-359.9deg);
}
}
正四面体
理解正六面体之后,正四面体就比较好上手了,正四面体由四个正三角形组成,每个面之间的夹角为70.5度,所以待会旋转的角度也就是70.5度。
首先看到HTML的结构就是只有四个div而已。
camera和space的设定就不多谈,直接看到这些box的属性,别忘记要画正三角形,就要用到边框来绘制。
.space div{
position:absolute;
width:0;
height:0;
border-width:0 50px 87px;
border-style:solid;
opacity:.4;
}
首先看到box1,box1依旧是最简单的(但也是比正方形的麻烦一点),这里我要用box1当底,所以除了直接做位置的移动,移动后还要绕X轴旋转90度,比较特别的是因为正三角形是由边框构成,所以颜色就是要改变border才可以。
.box1{
border-color:transparent transparent #f00;
transform-origin:center bottom;
transform:translateX(50px) translateY(50px) rotateX(-90deg);
}
再来就是另外三个面了,box2跟box1差不多简单,只是box1旋转90度,box2要旋转19.5度,因为box1要和box2有着70.5度的夹角。
.box2{
border-color:transparent transparent #00f;
transform-origin:center bottom;
transform:translateX(50px) translateY(50px) rotateX(-19.5deg);
}
box3比较麻烦,我们要先让box3绕着Y轴旋转60度(因为正三角形每个角是60度),绕完之后,再绕X轴旋转19.5度,为什么这里的19.5度是正值呢?因为我们绕Y轴旋转后,X轴也跟着旋转,所以绕X轴的方向就变成颠倒过来了。
.box3{
border-color:transparent transparent #00f;
transform-origin:right bottom;
transform:translateX(50px) translateY(50px) rotateY(60deg) rotateX(19.5deg);
}
box4和box3类似,同样的要先绕Y旋转60度,这次是要绕负的,因为是另外一侧。
.box4{
border-color:transparent transparent #f0f;
transform-origin:left bottom;
transform:translateX(50px) translateY(50px) rotateY(-60deg) rotateX(19.5deg);
}
按照上面做,应该就可以得到下图的结果:
同样的,把space加上动画,就可以看到正四面体旋转啰!比较不同的地方是中心点的位移为29px,为什么呢?因为要抓取正三角形的中心点,数学式为:tan(30deg)x 50 = 28.86。
.space{
position:relative;
width:100%;
height:100%;
transform-style:preserve-3d;
-webkit-transform-origin:center center 29px;
-webkit-animation:s 4s linear infinite;
}
@-webkit-keyframes s{
0%{
-webkit-transform:rotateY(0);
}
100%{
-webkit-transform:rotateY(-359.9deg);
}
}
如何利用python画三棱锥_玩转CSS 3D -正四面体与正六面体相关推荐
- 如何利用python画三棱锥_微积分,英文版数学书,Calculus,积分,Excel,自然常数e,Python,泰勒展开...
标题写的挺长的. 我是个学渣,念过大学,学过高数,学的时候不甚懂,工作中也没实践,仅有的一点粗浅概念早就还给老师了. 因为儿子即将开始学前教育,未雨绸缪,我开始研究现在的义务教育有些什么内容,不知不觉 ...
- 如何利用python画三棱锥_1、增加一个操作员,以你的操作员名称后面添加(2)...
[单选题]pH为()时,蛋白质显示最低的水合作用 [判断题]蛋白质的变性只涉及高级结构的改变,一级结构不变. [多选题]蛋白的功能性质指的是() [单选题]普通楼屋面板端部钢筋构造如图所示, 上部钢筋 ...
- 如何利用python画三棱锥_blender插件DEMO,添加一个三菱锥
1.[文件] 插件 ~ 3KB 下载(17) bl_info = { "name" : "Tetrahedron Object", "author&q ...
- 利用python画分形图_「分形」python简单的分形图片 - seo实验室
分形 康托集 # 康托集 import pygame pygame.init() screen = pygame.display.set_caption('康托集') screen = pygame. ...
- 利用python画分形图_使用 Python 绘制 Mandelbrot 分形图
以前收集的关于Mandelbrot分形图的Python脚本,Mandelbrot集合的图像因它洛可可式繁复卷曲华丽的风格而受到大众的欣赏和赞叹,与其他分形图案一起,是许多艺术家和设计师的灵感来源. 是 ...
- 用python画动态樱花_利用python画一棵漂亮的樱花树,turtle画图代码大全,此处感谢知乎大佬小白...
利用python画一棵漂亮的樱花树,turtle画图代码大全,此处感谢知乎大佬小白 此处感谢知乎大佬 小白练手 练习一下比较流行的turtle(海龟库) 画一棵漂亮的樱花树,效果如下: ps: 是动态 ...
- python中词云图怎样变成特殊图案_如何利用python画出一个多变的词云图?(1)...
问题描述: 如何利用python画出一个多变的词云图? 解决方法:import numpy as np import matplotlib import matplotlib.pyplot as pl ...
- python画一颗心_利用python画一颗心的方法示例
前言 Python一般使用Matplotlib制作统计图形,用它自己的说法是'让简单的事情简单,让复杂的事情变得可能'.用它可以制作折线图,直方图,条形图,散点图,饼图,谱图等等你能想到的和想不到的统 ...
- python怎么画出圆润的曲线_利用python画出AUC曲线的实例
以load_breast_cancer数据集为例,模型细节不重要,重点是画AUC的代码. 直接上代码: from sklearn.datasets import load_breast_cancer ...
- python画二维温度云图_利用python画出词云图
本文将介绍如何利用python中相应的模块画出词云图.首先给出效果图: 其中词云图中的词汇是对手机短信中的垃圾短信的统计,字体越大表示在垃圾短信中出现的频次越高.下面给出具体的步骤. 读取" ...
最新文章
- 最近在学OpenGL和英语
- 【PAT乙级】1064 朋友数 (20 分)
- Repeater嵌套绑定
- OC基础1:一些基本概念
- 04 理解SQL与T-SQL的概念测试分析 1214
- 【caffe】Check failed: status == CUDNN_STATUS_SUCCESS (4 vs. 0) CUDNN_STATUS_INTERNAL_ERRO
- Windroy Lets Android run on Windows systems-- 国外androids 虚拟系统分享
- 微服务实现不同登陆_PaaS与IaaS在微服务架构实现方面的6大不同
- 十七、String类型常用方法(二)
- Day_05初始化GDT和IDT
- J1939标准概述【小白入门】
- 前加加 后加加 ++ 详解
- Unity 给代码添加命名空间
- win7电脑访问共享提示“您可能没有权限使用网络资源”的解决技巧--win10专业版
- wxpy登录 KeyError: 'pass_ticket'
- 网游之古剑太初最新章节
- C语言中write函数
- 用hook android 微信,【第一篇】【安卓微信】HOOK微信发消息,当HOOK遇上HOOK。
- 大比分领先!ACCV 2022 国际细粒度图像分析挑战赛冠军方案
- VirtualBox虚拟机安装和环境搭建
热门文章
- java读取加密excel_Java 加密和解密Excel文档
- 深度学习数学基础 讲义_深度学习入门部分的讲义3
- csgo靠谱的开箱网站有哪些?csgo开箱网站大全
- F. Clear the String (区间DP)
- 基于网页版微信实现的微信SDK(Kotlin版,兼容Java)
- 我是个Java开发者,我到底要不要学大数据开发?
- 读李尚龙《你只是看起来很努力》摘录的句子
- 囍囍囍~~~ 以后可能用的着
- module ‘statsmodels.stats.diagnostic‘ has no attribute ‘het_breushpagan‘
- python做乘法运算定律_乘法运算定律(四年级数学下册乘法运算定律)