首页 > > 网页制作 > css >

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

2018-06-24 00:15:39来源：未知阅读 ()

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

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

先上代码（多数照搬自上述链接，有很大兼容问题，小心使用）

HTML：

<div class="flip-container">
    <div class="flipper">
        <div class="front">here is content : AA</div>
        <div class="back">here is content : BB</div>
    </div>
</div>

CSS:

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

}
.front ,.back{
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;  /*重要*/
    width: 100%;
    height: 100%;
}
.front {
    transform: rotateY(0deg);
    z-index: 2;
    background: red;
}
.back {
    transform: rotateY(-180deg);
    background: green;
}

在最外层的容器元素上设置整个动画区域的透视(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如下：

<div class="flip-container">
    <div class="front">here is content : AA</div>
    <div class="back">here is content : BB</div>
</div>

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

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

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

.flip-container:hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container:hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 3; /* 降级处理不支持CSS3的浏览器，只是简单的将back上升盖住front */
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s;
    position: absolute;
    top: 0px;
    left: 0px;
}
.front {
    background: red;
    z-index: 2;
}
.back {
    background: green;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

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

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

.outer {
    width: 200px;
    height: 200px;
}
.inner {
    transition: 0.6s;
}
.outer:hover .inner{
    transform: rotateY(180deg);
}

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

.inner {
    width: 200px;
    height: 200px;
　　transition: 0.6s;
}
.inner:hover{
    transform: rotateY(180deg);
}

关于CSS3 transform的更详细介绍，参见大神文章好吧，CSS3 3D transform变换，不过如此！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：CSS3之3D变换实例详解

下一篇：sass初级语法

ie8下透明度处理 2020-06-11
CSS3 2020-06-05
css：css3（圆角边框、盒子阴影、文字阴影） 2020-06-05
css：背景（背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
2.CSS3选择器 2020-05-17

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签