教你怎么用CSS3做一个图片的旋转木马效果

CSS3的功能很强大,不但可以添加很多的样式,也可以绘制自定义的动画效果。要做一个图片的旋转木马效果,我们需要用到CSS3的3d转换。对于3d转换具体的内容,虽然这块内容并不是那么容易让人理解,不过这里也就不做介绍了,可以在菜鸟教程或者W3C里好好看看,然后自己多动手试试,一点点的去领会(本菜也是研究了好几个小时才稍稍理解那些属性的具体意思)。

学习网站

菜鸟教程

不多说,现在进入正题。

先看一个我自己做的简单的旋转木马效果
旋转木马demo

例子

这个例子是我随手写的,非常简单,不过只要你掌握了实现原理,你就可以随行所欲的做出自己想要的华丽的效果。

首先我们要做这个旋转木马效果之前,我们要想想需要实现哪些3d的转换。刚做的时候其实想到的就只有rotateY属性。然后还得想想怎么实现,如果给每个图片都添加一个动画效果是不是太麻烦了。所以我们可以创造一个容器,在容器里放好这些图片,然后对容器进行旋转,这样,我们只需要对容器加一个动画效果就行。
那我们先来试试这样做,我们先创建一个容器,创建四个div,这几个div用绝对定位,让他们共用中心点。

<div id="rq">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>

这四个div只需要添加不同的rotateY()属性,使其围成一个圈。所以每个div之间相距应该是90deg。在容器里必须加一个属性transform-style: preserve-3d;让他的子元素也是实现3d效果。
查看效果,一看这是什么东西。在这里我们发现了一个问题,因为这几个div因为位置是一样的,所以在rotateY()旋转的时候,都叠在了一起。


所以我们得想个办法,让这几个div分开来,并沿着中心点进行旋转。
好好想想,看看能不能找到解决办法!
还记得我们在学习3d转换的时候,了解过perspective和translateZ()方法(刚学的时候,这两个内容不太好理解,需要自己好好的研究一下)。perspective是舞台视距,translateZ()会跟着舞台视距进行移动。我们可以通过这两个属性来把这几个div分离开来。首先我们在容器外面再加一个舞台。

<div id="all">
    <div id="rq">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
    </div>
</div>

给舞台加一个perspective: 800px;属性(这个属性的大小可以自己定义)。然后再每个div里加上translateZ()属性,可以自己慢慢试,设置好一个合适的值。如果方向什么有偏差,可以通过perspective-origin:进行微调。调整好了之后,用关键帧动画实现给容器加个旋转的效果,就大功告成了。只要你理解了perspective和translateZ()方法,对你来说肯定很简单。

对于源码的话,小伙伴们可以查看上面那个demo网页的审查元素来查看。

你现在就可以用上你自己喜欢的图片来做一个华丽的的旋转木马效果了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容。看过海贼王的都知道,带D的家伙...
    MrZengB阅读 1,374评论 2 9
  • 当我看到下面这张基本图的时候,我的右侧的浓眉毛不由自主抖动了两下,呵,呵呵~~ rotateY( angle ) ...
    追風逸少丶阅读 1,534评论 0 3
  • 今天天气好晴朗处处好风光伴随着好天气的到来心情都更加明朗了呢是不是该学点烧脑的内容了呢傻球也要出来晒晒太阳咯~ C...
    Iris_mao阅读 640评论 0 2
  • 第一种方式: 首先,我们在html中有这样一个布局: 不要小看外面那个div,它可是本次内容不可少的呢,没了它,后...
    心羽暖姐姐阅读 9,601评论 1 2
  • CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍...
    张歆琳阅读 28,043评论 5 81