做一个旋转的金字塔

时间：2023-04-05 19:59:21 HTML5

制作一个旋转的金字塔动画，使用css动画，效果如下，下面代码创建了金字塔需要的图层，一共四个边

设置金字塔的位置和整个金字塔的大小（这个不重要）.triangle{width:20%;高度：50%；位置：绝对；左：30%；top:30%;}为金字塔的每一侧设置size.boxdiv{width:100%;高度：80%；位置：绝对；}然后为每一面设置一个背景图像。图片及样式如下boxdiv{width:100%;高度：80%；~~~~位置：绝对；背景：url('image/triangle.png')不重复；background-size:100%100%;}现在显示的效果如下，给盒子添加3D旋转动画。box{/*设置3D效果*/transform-style:preserve-3d;/*盒子的大小*/width:100%;高度：100%；边距：0px自动；动画：旋转5s轻松；/*无限执行*/animation-iteration-count:infinite;动画计时函数：线性；}/*添加3D旋转效果Y轴旋转*/@keyframesrotate{from{transform:rotateX(-20deg)rotateY(0deg);}到{变换：旋转X(-20deg)旋转Y(360deg);}}现在实现的效果如下。最后一步是调整每边的角度，就完成了/*调整位置，做成金字塔*/.box.surface1{transform:rotateX(31deg)translateZ(90px);}.box.surface2{变换：rotateX(-31deg)translateZ(-90px)rotateY(180deg);}.box.surface3{变换：rotateZ(31deg)rotateY(-90deg)translateZ(90px);}.box.surface4{变换：rotateZ(-31deg)rotateY(90deg)translateZ(90px);}`

上一篇：基于HTML5+WebGL的垃圾分类系统

下一篇：把网址一键转成APP就够了吗？

做一个旋转的金字塔相关文章