好玩的CSS3(3)-- 翻转(旋转正反两张)图片

0 点赞
0 条评论
2065 次浏览
发布于 2019-04-03 18:50

错误的思路

    1、先看效果图(这里准备两张相同的图片)


  1. 2、刚开始的思路:两张层叠的图片,旋转第一张,在旋转第二张。通过时间差来实现,然后出现了bug,以为是层级问题,但是背后一张回去的时候显示
  2. 3、HTML结构
  3. <div>
    <img class="a" src="img/hou.svg" alt="">
    <img class="b" src="img/qian.svg" alt="">
    </div>
    div {
    width: 224px;
    height: 224px;
    position: relative;
    margin: 50px auto;
    }
    div img {
    position: absolute;
    left: 0;
    top: 0;
    }
    .b {
    transition: all 1s linear;
    }
    .a {
    transition: all 2s linear;
    }
    div:hover .b {
    transform: rotateY(90deg);
    }
    div:hover .a {
    /* transition-delay: 1s; */
    transform: rotateY(180deg);
    }

    正确的解决方式

  4. div {
    position: relative;
    margin: 100px auto;
    width: 224px;
    height: 224px;
    }
    div img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 2s;
    }
    div img:first-child {
    z-index: 1;
    backface-visibility: hidden;
    }
    div:hover img {
    transform: rotateY(180deg);
    }

    backface-visibility

  5. 指定当元素背面朝向观察者时是否可见。元素的背面总是透明的,当其朝向观察者时,显示正面的镜像。在某些情况下,我们不希望元素内容在背面可见,比如实现翻牌效果。因为2D变换无透视效果,故该属性对2D变换无效。

    指定元素背面是否可见,可为以下值:

    visible 表示背面可见,允许显示正面的镜像。

    hidden 表示背面不可见。

    正方形透视案例  

版权所属:开发日记
转载时必须以链接形式注明原始出处及本声明。
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...