利用CSS3做简单的图片上下左右翻转

最新推荐文章于 2025-03-18 10:42:21 发布

归小超

最新推荐文章于 2025-03-18 10:42:21 发布

阅读量1.5w

点赞数 2

分类专栏：前端知识

本文链接：https://blog.youkuaiyun.com/weixin_42966484/article/details/82257005

版权

前端知识专栏收录该内容

29 篇文章

订阅专栏

这篇博客介绍了如何利用CSS3实现简单的图片上下左右翻转效果。通过HTML添加图片，然后设置transition属性，包括属性名、持续时间、延迟和转速曲线。详细解释了transition-timing-function的各种特性和如何自定义cubic-bezier值。最后，通过CSS实现hover或click触发的翻转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天想在页面上加一点效果，所以就做了一个图片翻转
直接上代码吧：

1.第一步肯定是在HTML页面上放入图片

     <img class="transition" src="XXX.jpg" /></li>

2.第二步骤就是在改元素下面添加一个transition，参数分别表示时间和移动的效果

  .transition {
    -webkit-transition: .9s ease-out;
       -moz-transition: .9s ease-out;
        -ms-transition: .9s ease-out;
         -o-transition: .9s ease-out;
            transition: .9s ease-out;
  }

transition其实有4个参数: property duration timing-function delay;
分别表示
transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-delay 定义transition效果开始的时候
transition-timing-function 指定transition效果的转速曲线
转速曲线又有如下特性：
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

3.接下来就是最重要的变化CSS：

.right {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }

  .left {
    -webkit-transform: rotateY(-360deg);
       -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
         -o-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
  }

  .top {
    -webkit-transform: rotateX(360deg);
       -moz-transform: rotateX(360deg);
        -ms-transform: rotateX(360deg);
         -o-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }

  .bottom {
    -webkit-transform: rotateX(-360deg);
       -moz-transform: rotateX(-360deg);
        -ms-transform: rotateX(-360deg);
         -o-transform: rotateX(-360deg);
            transform: rotateX(-360deg);
  }