css3 3d翻转效果

css3 3d翻转效果

3d变换

perspective （透视，视角）： 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。决定了你所看到的是2D transform 还是3D transform 。
视距（perspective）和translateZ
视距就是眼睛距离物体原本位置的距离，而translateZ()就是用来改变 物体当前位置 离 物体原本所在位置距离的方法。
当translateZ的值大于或者很接近视距的时候，那整个屏幕都被这个元素占满了。
景深基点（perspective-origin
perspective-origin属性定义3D元素所基于的X轴和Y轴。该属性允许您改变3D元素的底部位置。说白了就是你移动到不同的地方看这个元素，默认值是正对着元素看，即 perspective-origin: 50% 50% 0;
第一个值可以为left|right|center|百分比|length，表示向x轴方向移动视角（眼睛所在的位置）的距离。
第二个值可以为top|bottom|center|百分比|length，表示向y轴方向移动视角（眼睛所在的位置）的距离。
第三个值只能是具体的length，表示视角向z轴方向移动的距离。

如果在该属性父元素上和子元素上都设置了perspective会叠加，从而形成更佳立体的效果
在父元素： perspective: 800px;
在子元素 ： transform: perspective(800px) rotateY(45deg);
ps： perspective作为属性值的时候最好写在第一位
设置在子元素上时，origin默认时center center

背面隐藏（backface-visibility）
属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。默认值是visible，背面可见。
当设置了backface-visibility:hidden;的时候，当一个元素旋转知道完全翻了一个面的时候，那么这个元素将会不可见。
参考：https://blog.csdn.net/jingtian678/article/details/76358525

3d翻转效果

思路：
（1）最外层元素设置perspective以实现3D效果。
（2）当鼠标滑过最外层元素时，第二包裹层翻转180度，同时设置过渡速度。
（3）两个翻转块绝对定位，以致实现相同位置的叠加。同时设置backface-visibility避免在实现动画效果时露出背面。
（4）让.back最开始就翻转180度，以背面示人。
代码：

<div class="contentbox">
   <div class="qcontainer">
    <a href="#" class="film">
     <!-- 正面 -->
     <div class="face front"><img src="img/img1.jpg"