3d金字塔用css3动画,纯css实现旋转的金字塔
css是个神奇的东西,在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一,设计精巧,计算精密,令世人赞叹。那么如何用CSS画一个金字塔呢?
人丑话不多,先看一下效果
❐ 思路
金字塔是由5个面组成的,即4个侧面和1个底面。我们可以把它看作是一个童年时期玩过的元宝,或者端午节戴在身上的福字。为什么这么说呢?
“横看成岭侧成峰”,我们看金字塔的俯视图是不是会看到这样一个图形,如下图所示
这是一个平面图形,如果让这个平面图形具有立体的效果不就是一个金字塔了么。即将上图的(0,0)沿着x轴旋转一定角度即可实现。
❐ 绘制
接下来就是绘制“元宝”的形状,侧面是4个三角形,底面是一个正方形。实现三角形可以采用clip-path的属性对可视区域进行裁剪。
由上图可知:clip-path的只能兼容高版本浏览器。polygon代表多边形,所以利用该属性可以绘制多如下图形:clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0 50%);
clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);
有了上述的图形之后,我们需要进行特殊的处理,才能得到我们想要的形状。因为我们要搭建金字塔,所有我们塔边的高度或者宽度需要大于底部的宽度和长度,不然的话无法搭成塔尖而形成如下图形:
故需设置大于底部宽和高,我们这里选取为高度为200px,宽度为100px,宽度需要和底部宽度保持一致。
假设我们现在已经有一个金字塔,我们可以取它的一个横截面如下图:
通过sin函数
$$sinA=\sqrt{(200^2-50^2)/200^2}$$
解上面反三角函数求得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%);
transform: rotateX(-180deg) translateZ(50px);
height: 200px;
transform-origin: 0 100%;
transform: translateZ(-50px) translateY(-200px) rotateX(-105deg);
clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);
width: 200px;
transform-origin: 100% 100%;
transform: translateZ(-50px) translateX(-200px) rotateY(105deg);
clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);
width: 200px;transform-origin: 100% 100%;transform: translateZ(-50px) translateX(-100px) rotateY(75deg);clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);
合并之后得到如下图形
通过使用css3中的3D转化属性,将上图进行转化即可:transform:rotateX(70deg) rotateZ(45deg);
transform-style:preserve-3d;
animation:rate 10s linear infinite;
由上图可知:transform-style:preserve-3d兼容是支持高版本浏览器,支持部分ie浏览器
❐ 总结
以上就是本文的全部内容,全部都是由css实现包括:定位:position
图形裁剪:clip-path
元素3D转化:transform
动画:animation
END
3d金字塔用css3动画,纯css实现旋转的金字塔相关推荐
- CSS3的transform之3d转换、CSS3动画
文章目录 前言 一.perspective属性和transform-style属性 二.transform之3d转换 transform之translate3d(x,y,z)平移 tranform之r ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- css3音乐播放动画,css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- 纯css阴阳旋转js特效代码
下载https://yy123.ink/frontDetail/4629下载 纯css阴阳旋转特效代码 dd:
- css3 太极动画,纯css实现太极阴阳鱼动画
原标题:纯css实现太极阴阳鱼动画 今天看到一个有意思的效果,闲来无事做一个: 把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示 ...
- html 数据交互动画,纯css实现可交互的动画
如题,不借助JavaScript,只利用CSS,如何实现可交互式的动画呢?或许该需求仅此一种解决方案,绝无仅有.不知该方案是否是第一次找到. 什么是可交互动画? 就是可以响应用户的动画,直接上图吧,更 ...
- android+水滴粘性动画,纯css实现Material Design中的水滴动画按钮
前言 大家平时应该经常见到这种特效,很炫酷不是吗 这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项 ...
- fullpage.js 滑入滑出滚屏动画, 纯css方式。利用css权重,无需js操作dom
**完整案例在下方** 1.分析 如下图所示, 一共8屏, 当前在第2屏上,fullpage.js 会在当前可视屏的最外层div上,插入一个active的class,根据框架添加外层的active动态 ...
最新文章
- centos 7.4 上安装neo4j并测试
- 运行sp_xp_cmdshell_proxy_account 出现的错误
- 小论接口(interface)和抽象类(abstract class)的区别
- Mac Hadoop的安装与配置
- 2018蓝桥杯省赛---java---A---9(倍数问题)
- python 使用 os的 popen(‘命令’) 如果命令行输出中 有中文乱码, 提示 'gbk' 无法解析的错误 解决办法
- 前端学习(2454):用户登录
- LeetCode 281. 锯齿迭代器(map+vector)
- python爬虫十二种方法_Python爬虫的N种姿势
- j2se--Socket沟通
- 【万字总结】基于多智能体强化学习的《星际争霸II》中大师级水平的技术研究
- 中关村 - DIY之如何唯美地阅读电子书
- python中的系统模块_python中与系统发育相关的模块
- uniapp手写_uniapp 手写 Steps 步骤条
- VMware VSphere Client克隆虚拟机
- 冒险岛linux_062服务端,支持arm64_armhf_amd_i386
- 一张图30分钟带你入门python-我,30分钟,P了100张图,秒杀全公司同事
- 会议oa之排座和送审
- 关于 python ImportError: No module named 的问题及解决办法
- css实现旋转的小箭头
热门文章
- 使用Python计算三角形的周长和面积(海伦公式)
- 小米笔记本air13——小米笔记本光标消失的解决【实测成功】
- Qt的错误几乎可能万能解决步骤思路
- Linux文本编辑常用命令
- Terraform 语法 variable变量 local本地变量的使用
- 小马哥---高仿苹果7p T8205 6582芯片刷机拆机主板图与开机识别图 2017新版机型
- 基于intel平台车载M12网管交换机方案,13路网口,支持bypass功能
- Linux学习——redis主从配置(带密码)
- 计算机音乐教程图片大全,图片+音乐做成视频简单两步操作,一图流音乐视频制作教程...
- Linux系统查看磁盘类型