大家好 。今天给大家分享的是通过CSS3实现3D旋转木马动画效果的方法 。我不需要多说什么 。点击下面的视频查看效果:
首先，我们在操作之前一定要知道它的原理 。我用动画的形式展示一下它的形成过程:
文章插图
原则
如果你还是不明白，我们来提炼一下:
文章插图
循序渐进
我们可以清楚地看到，所谓的3D立体效果，其实是由几个平面图形通过旋转和移动组合而成的 。现实中，我们可以用几张卡片来模拟 。
既然是3D立体效果，那就必须用3D 空完成 。网页中的3D坐标如下图所示 。在CSS中，我们可以让目标对象沿任意坐标轴平移或绕任意坐标轴旋转，并根据需要指定 。
文章插图
页面的三维坐标
接下来我们来看看如何通过CSS3在一个网页中实现这种效果 。
HTML结构:外围设置两层
文章插图
HTML结构
2 。基本风格设定:这里不用多说，大家都能看懂 。line-height设置为90px，与后面的内容框高度相同，实现文本垂直居中 。
文章插图
基本风格
3 。主体内容的一般样式:这里需要注意的是，position属性设置为absolute，可以不设置具体值，是为了让9个小方框重叠在同一个平面上 。
文章插图
一般风格
4 。立体效果设置:如前所述，要达到立体效果，每个内容主体都需要进行一定程度的旋转和移动 。那么问题来了，旋转多少角度，移动多远？参考下图从俯视的角度理解这个问题，顺便复习初中数学知识 。
文章插图
计算方法
可以看出，我们需要的旋转角度是:0，40，80，192px ……可以看出，我们需要的旋转角度是:0，40，80，192px
文章插图
文章插图
【CSS3之3D轮播动画详解 css3d动画演示】注意:背景色可以适当设置透明度 。每张图片围绕Y轴旋转相应的角度，然后沿Z轴移动210px 。如果先移动，再旋转，会发现九张图片是交叉的 。
现在刷新页面可以获得以下效果:
文章插图
哎！好像有那样的东西 。如果你聪明的话，应该会发现还有两个问题没有解决:一是它还没有动，二是它看起来没有立体感 。所以重点来了...
5 。移动:首先我们需要定义一个动画，然后在需要移动的地方引用它 。从开场效果可以看出，9张图片组成的整体围绕Y轴旋转360 。所以我们定义一个动画为“@关键帧动画名”(具体参考w3school)，0%为初始状态，100%为最终状态，然后在父元素中引用 。
推荐阅读
- 70克的百分之15是多少
- 万族之劫天灭城是什么
- 夜叉之愿任务怎么触发
- 明日之子孟美岐第几期
- 网曝《寂静岭》新作截图 风格与《生化危机》很像
- 命世之才的文言文翻译
- 什么是耄耋之年
- 像惊弓之鸟这样的词语有哪些
- gt710能玩永恒之塔吗
- 切片之后怎么保存