css做翻转效果

之前在做项目的时候 有个需求是给图片做翻转效果，这里回顾一下用css3做翻转效果。

同样的html代码超级简单：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">        <div class="flipper">          <div class="front">            <!-- 前面图片 -->            <img src="http://placehold.it/250X340" alt="">          </div>          <div class="back">            <!-- 背面内容 -->            <p>吴琼琼</p>            <p>今年12岁</p>            <p>妹子</p>            <p>吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦</p>          </div>        </div>      </div>

css代码：

  /*翻转*/  .flip-container {    perspective: 1000;    -webkit-perspective: 1000;/* Safari 和 Chrome */  }  .flip-container:hover .flipper,  .flip-container.hover .flipper {   transform: rotate(180deg);    -ms-transform: rotate(180deg);    /* IE 9 */    -moz-transform: rotate(180deg);    /* Firefox */    -webkit-transform: rotate(180deg);    /* Safari 和 Chrome */    -o-transform: rotate(180deg);    /* Opera */    filter: FlipV;  }  .flip-container,  .front,  .back {    width: 250px;    height: 340px;  }  .flipper {    transition: 0.6s;    transform-style: preserve-3d;    position: relative;  }  .front,  .back {    backface-visibility: hidden;    position: absolute;    top: 0;    left: 0;  }  .back {    background-color: pink;  }  .front2,  .back2 {    backface-visibility: hidden;    position: absolute;    top: 0;    left: 263PX;  }  .front {    z-index: 2;  }  .back {    transform: rotateY(180deg);    -ms-transform: rotateY(180deg);  }

先来普及一下用到的几个css3属性

perspective

设置元素被查看位置的视图，但是目前所有的浏览器都不支持，Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
定义与用法： perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。tips：perspective 属性只影响 3D 转换元素。
了解更多CSS3 perspective 属性猛戳

transform

旋转 div 元素。
IE 10、Firefox、Opera 支持 transform 属性。
IE 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
定义与用法： transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
了解更多CSS3 transform 属性猛戳

transition

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
IE 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
tips：IE 9 以及更早版本的浏览器不支持 transition 属性。
定义与用法： transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property
transition-duration
transition-timing-function
transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
了解更多CSS3 transition 属性猛戳

transition-property

把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果
IE 10、Firefox、Opera 和 Chrome 支持 transition-property 属性。
Safari 支持替代的 -webkit-transition-property 属性。
注释：IE 9 以及更早版本的浏览器不支持 transition-property 属性。

div{transition-property:width;-moz-transition-property: width; /* Firefox 4 */-webkit-transition-property:width; /* Safari 和 Chrome */-o-transition-property:width; /* Opera */}

定义与用法 transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition-duration

让过渡效果持续 n 秒
IE10、Firefox、Opera 和 Chrome 支持 transition-duration 属性。
Safari 支持替代的 -webkit-transition-duration 属性。
注释：IE 9 以及更早版本的浏览器不支持 transition-duration 属性。

div{transition-duration: 5s;-moz-transition-duration: 5s; /* Firefox 4 */-webkit-transition-duration: 5s; /* Safari 和 Chrome */-o-transition-duration: 5s; /* Opera */}

定义与用法 transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-timing-function

以相同的速度从开始到结束的过渡效果：
IE10、Firefox、Opera 和 Chrome 支持 transition-timing-function 属性。
Safari 支持替代的 -webkit- transition-timing-function 属性。
注释：IE 9 以及更早版本的浏览器不支持 transition-timing-function 属性。

div{transition-timing-function: linear;-moz-transition-timing-function: linear; /* Firefox 4 */-webkit-transition-timing-function: linear; /* Safari 和 Chrome */-o-transition-timing-function: linear; /* Opera */}

定义与用法 transition-timing-function 属性规定过渡效果的速度曲线。允许过渡效果随着时间来改变其速度。

transition-transition-delay

在过渡效果开始前等待 n 秒：
IE 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。
Safari 支持替代的 -webkit-transition-delay 属性。
注释：IE 9 以及更早版本的浏览器不支持 transition-delay 属性。

divdiv{transition-delay: 2s;-moz-transition-delay: 2s; /* Firefox 4 */-webkit-transition-delay: 2s; /* Safari 和 Chrome */-o-transition-delay: 2s; /* Opera */}

定义与用法 transition-delay 属性规定过渡效果何时开始 , 值以秒或毫秒计。

transform-style

使被转换的子元素保留其 3D 转换.

div{transform: rotateY(60deg);transform-style: preserve-3d;-webkit-transform: rotateY(60deg);  /* Safari 和 Chrome */-webkit-transform-style: preserve-3d;   /* Safari 和 Chrome */}

Firefox 支持 transform-style 属性。
Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
定义与用法： transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
flat：子元素将不保留其 3D 位置。
preserve-3d： 子元素将保留其 3D 位置。
了解更多CSS3 transform-style属性猛戳

backface-visibility

隐藏被旋转的 div 元素的背面。

div{backface-visibility:hidden;-webkit-backface-visibility:hidden; /* Chrome 和 Safari */-moz-backface-visibility:hidden;    /* Firefox */-ms-backface-visibility:hidden;     /* Internet Explorer */}

只有 IIE 10+ 和 Firefox 支持 backface-visibility 属性。
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。
**定义与用法：**backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
visible：背面是可见的。
hidden ：背面是不可见的。
了解更多CSS3backface-visibility属性猛戳