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"></div><!-- 背面 --><div class="face back"><h3>易烊千玺!!</h3></div></a></div><div class="qcontainer" ><a href="#" class="film"><div class="face front"><img src="img/img2.jpg"></div><div class="face back"><h3>马天宇!!</h3></div></a></div><div class="qcontainer"><a href="#" class="film"><div class="face front"><img src="img/img3.jpg"></div><div class="face back"><h3>朱一龙!!</h3></div></a></div><div class="qcontainer"><a href="#" class="film"><div class="face front"><img src="img/img4.jpg"></div><div class="face back"><h3>小鬼!!</h3></div></a></div></div>

body{background-color: #000000;}.contentbox{width:960px;margin:auto;margin-top:2em;overflow: hidden;}.qcontainer{/*舞台（动画元素的父容器）perspective*/perspective: 400px;float:left;width:220px;height:180px;margin-right:20px;}.film{/*动画元素transform-style*/transform-style:preserve-3d;/* 动画效果 */transition:1.5s;display: block;}.film img{width:220px;height:180px;}.qcontainer:hover .film{/* 绕y轴旋转 */transform:rotateY(180deg);}.face{position:absolute;/*动画元素背后设置为hidden*/backface-visibility:hidden;}.face h3{color:white;text-align:center;}.back{width:220px;height:180px;/* 绕y轴旋转180度，以背面示人 */transform:rotateY(180deg);/* 背景颜色渐变 */background-image: linear-gradient(#fdbb5a,#db5726);}

效果：