首页 > web前端 > html教程 > CSS3图片翻转切换案例及其中重要属性解析

CSS3图片翻转切换案例及其中重要属性解析

WBOY
发布: 2016-08-26 10:13:15
原创
1753 人浏览过

图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换。

无意中发现CSS3的方案, http://www.webhek.com/css-flip/  赶紧学习并总结如下

先上代码(多数照搬自上述链接,有很大兼容问题,小心使用)

HTML:

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flipper"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> </span></span></span></span>
登录后复制

CSS:

<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
    -webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.flipper </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 触发翻转 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container:hover .flipper</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;

}<span style="color: #800000;">
.front ,.back</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;
}
登录后复制
  • 在最外层的容器元素上设置整个动画区域的透视(perspective)属性。
  • 当外层容器元素遇到鼠标悬停事件时,内部存放卡片的容器旋转180度。这里也是控制旋转速度的地方。如果将旋转值设置为-180deg,是反向旋转。
  • 表示卡片正面和背面的元素都要绝对定位,这样它们才能在相同的位置相互遮挡。它们的背面可视性(backface-visibility)属性设置为隐藏,这样每个卡片的背面在翻转时都是看不见的。
  • 将卡片的正面设置为一个比背面要高的z-index值,这样保证卡片的正面在最上面。
  • 将背面卡片旋转180度,这样让它扮演背面的角色。

照搬结束,其中CSS中注释了重要的需要特别注意。

perspective 属性定义 3D 元素距视图的距离,以像素计。直观现象就是内层的元素在翻转时会溢出外层边框,如果不写,或者属性值为0,则只在外层边框内变化。

且属性值需要特别注意和需要翻转的元素的宽高相适应,太少溢出很夸张,太多了和设为0的区别不大。区别效果如下图所示

transform-style: preserve-3d; transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素(照抄自w3cschool)。

flip-container 和 flipper 都需要设置,flip-container不设置会导致溢出的3D效果缺少,flipper 不设置则容器翻转后,我们看到的还是front的背面,backface-visibility: hidden不能体现效果。

比较坑的是transform-style即使在IE11中都是不支持的。

所以还有一个兼容IE的方案,就是不翻转容器,而是同时翻转front和back,幸好IE还是支持backface-visibility: hidden的,所以翻转效果和上一个方案一致。

HTML如下:

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  </span></span></span>
登录后复制

由于直接翻转front和back,flipper就显得多余了,去掉了flipper。

CSS代码如下(经过多方试验,尽量支持各个浏览器,并降级处理了不支持CSS3翻转的浏览器,保留了切换效果)

 

<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
    -webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    -ms-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">由于内层绝对定位导致高度缺少,这里显式设置了宽高</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container, .front, .back </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">

.flip-container:hover .front </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}<span style="color: #800000;">
.flip-container:hover .back </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 降级处理不支持CSS3的浏览器,只是简单的将back上升盖住front </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

.front, .back </span>{<span style="color: #ff0000;">
    -webkit-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -moz-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -ms-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -moz-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -o-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -ms-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0px</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;
}
登录后复制

以上也许有许多不必要的兼容代码,水平有限了,欢迎交流更简练的写法。

还有一个小TIPS,在其他情况使用hover触发元素翻转时应如下使用,固定宽高的父元素触发,子元素翻转

<span style="color: #800000;">.outer </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">
.inner </span>{<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;
}<span style="color: #800000;">
.outer:hover .inner</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}
登录后复制

如下直接对元素hover触发翻转会有很大的使用问题,因为元素翻转过程中,元素区域变小,光标就脱离元素了,于是元素还原,又触发hover变小,造成不顺畅

<span style="color: #800000;">.inner </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<br>  transition: 0.6s;
}<span style="color: #800000;">
.inner:hover</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}
登录后复制

 

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板