Web前端CSS实战之纯Css实现旋转的金字塔
小职 2021-01-29 来源 :前端简报 阅读 1407 评论 0

摘要:本文主要向大家介绍了Web前端CSS实战之纯Css实现旋转的金字塔,通过具体的内容向大家展现,希望对大家对Web前端CSS的学习有所帮助。

本文主要向大家介绍了Web前端CSS实战之纯Css实现旋转的金字塔,通过具体的内容向大家展现,希望对大家对Web前端CSS的学习有所帮助。

Web前端CSS实战之纯Css实现旋转的金字塔

css是个神奇的东西,在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一,设计精巧,计算精密,令世人赞叹。那么如何用CSS画一个金字塔呢?

 

人丑话不多,先看一下效果

 Web前端CSS实战之纯Css实现旋转的金字塔


 思路

 

金字塔是由5个面组成的,即4个侧面和1个底面。我们可以把它看作是一个童年时期玩过的元宝,或者端午节戴在身上的福字。为什么这么说呢?

 

“横看成岭侧成峰”,我们看金字塔的俯视图是不是会看到这样一个图形,如下图所示

 Web前端CSS实战之纯Css实现旋转的金字塔

 

这是一个平面图形,如果让这个平面图形具有立体的效果不就是一个金字塔了么。即将上图的(0,0)沿着x轴旋转一定角度即可实现。

 Web前端CSS实战之纯Css实现旋转的金字塔

 

❐ 绘制

 

接下来就是绘制“元宝”的形状,侧面是4个三角形,底面是一个正方形。实现三角形可以采用clip-path的属性对可视区域进行裁剪。

 Web前端CSS实战之纯Css实现旋转的金字塔

 

由上图可知:clip-path的只能兼容高版本浏览器。polygon代表多边形,所以利用该属性可以绘制多如下图形:

 

clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0 50%);

 Web前端CSS实战之纯Css实现旋转的金字塔

 

clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);

 Web前端CSS实战之纯Css实现旋转的金字塔

 

有了上述的图形之后,我们需要进行特殊的处理,才能得到我们想要的形状。因为我们要搭建金字塔,所有我们塔边的高度或者宽度需要大于底部的宽度和长度,不然的话无法搭成塔尖而形成如下图形:

 

 Web前端CSS实战之纯Css实现旋转的金字塔

故需设置大于底部宽和高,我们这里选取为高度为200px,宽度为100px,宽度需要和底部宽度保持一致。

 

假设我们现在已经有一个金字塔,我们可以取它的一个横截面如下图:

 Web前端CSS实战之纯Css实现旋转的金字塔

 

通过sin函数

 Web前端CSS实战之纯Css实现旋转的金字塔

 

 

解上面反三角函数求得A大约为75deg,以此类推我们可以算出其他图形旋转角度。

 

将上述的两种三角形通过适当的平移和旋转,得到如下图形:

 

transform:translateZ(-50px) translateY(-100px) rotateX(-75deg);

height: 200px;

transform-origin: 0 100%;

clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);

 Web前端CSS实战之纯Css实现旋转的金字塔

 

transform: rotateX(-180deg) translateZ(50px);

 Web前端CSS实战之纯Css实现旋转的金字塔

 

height: 200px;

transform-origin: 0 100%;

transform: translateZ(-50px) translateY(-200px) rotateX(-105deg);

clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);

 Web前端CSS实战之纯Css实现旋转的金字塔

 

width: 200px;

transform-origin: 100% 100%;

transform: translateZ(-50px) translateX(-200px) rotateY(105deg);

clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);

 Web前端CSS实战之纯Css实现旋转的金字塔

 

width: 200px;transform-origin: 100% 100%;transform: translateZ(-50px) translateX(-100px) rotateY(75deg);clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);

 Web前端CSS实战之纯Css实现旋转的金字塔

 

合并之后得到如下图形

 Web前端CSS实战之纯Css实现旋转的金字塔

 

通过使用css3中的3D转化属性,将上图进行转化即可:

 

transform:rotateX(70deg) rotateZ(45deg);

transform-style:preserve-3d;

animation:rate 10s linear infinite;

 

Web前端CSS实战之纯Css实现旋转的金字塔

 

 Web前端CSS实战之纯Css实现旋转的金字塔

由上图可知:transform-style:preserve-3d兼容是支持高版本浏览器,支持部分ie浏览器

 

❐ 总结

 

以上就是本文的全部内容,全部都是由css实现包括:

 

定位:position

图形裁剪:clip-path

元素3D转化:transform

动画:animation



关注“职坐标在线”(Zhizuobiao_Online)公众号,免费获取学习教程资料、技术就业咨询

Web前端CSS实战之纯Css实现旋转的金字塔

本文由 @小职 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程