• 技术文章 >web前端 >css教程

    css怎么实现翻转效果

    藏色散人藏色散人2021-04-02 10:54:30原创81

    css实现翻转效果的方法:首先创建一个演示方块,并为其添加transition和transform属性;然后将transition属性添加到需要翻转的p上;最后添加perspective和transform-style属性即可。

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

    作为前端开发人员的必修课,CSS3能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~

    第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform属性

    // 本示例均使用Sass语法
    .block {
      width: 200px;
      height: 200px;
      background: brown;
      cursor: pointer;
      transition: 0.8s;
      &:hover {
        transform: rotateY(180deg);
      }
    }

    我们看一看这时候的效果:

    这里 需要注意 的是: transition属性要写在.block上而不是hover上 ,如果只在hover上写transition,则鼠标移出时并没有transition的过渡效果,如果我们只将transition写在hover上:

    第二步比较关键:我们不难发现始终在1个平面上翻转,不够有立体感,因此我们需要稍加改变思路—— 用2层p嵌套

    // html部分
    <div class="block">
        <div class="block-in"></div>
    </div>
    // CSS部分
    .block {
      width: 200px;
      height: 200px;
      cursor: pointer;
     
      &-in {
        background: brown;
        height: 100%;
        transition: 0.8s;
      }
      
      &:hover .block-in {
        transform: rotateY(180deg);
      }
    }

    此时效果没变,如下:

    这个时候 关键的1步 来了:我们需要 给外层添加perspective和transform-style属性 ,为整个动画增添3D变形效果:

    .block {
      width: 200px;
      height: 200px;
      cursor: pointer;
      /* 3D变形 */
      transform-style: preserve-3d;
      -webkit-perspective: 1000;
      -moz-perspective: 1000;
      -ms-perspective: 1000;
      perspective: 1000;
     
      &-in {
        background: brown;
        height: 100%;
        transition: 0.8s;
      }
     
      &:hover .block-in {
        transform: rotateY(180deg);
      }
    }

    最终实现效果如下:

    最终我们 总结一下思路

    1.建立内外2层p,鼠标 hover 到外层时,内层p添加翻转 transform: rotateY(180deg)

    2.注意将 transition 属性添加到需要翻转的p上,而不是 hover 时

    3.外层p添加 perspective 和 transform-style 属性,最终实现3D翻转效果

    推荐学习:《css视频教程

    以上就是css怎么实现翻转效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:CSS3 3D翻转
    上一篇:详解CSS3+SVG滤镜实现不规则边框的方法 下一篇:css怎么实现禁止点击
    第15期线上培训班

    相关文章推荐

    • css怎么设置文字间距• 深入浅析css属性选择器• css中哪些属性可以继承• 如何使用css去掉a标签的下划线?(代码详解)• css怎么去掉边框

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网