最近学了妙味的css3的动画，2D,3D的都有，先写一个最简单的3d翻转效果，鼠标移入div，正反面翻转效果。
注意点有：
- 要给正反面外面加个父级；
transform-style: preserve-3d;是加在正反面的父级，使动画具有3d的效果；但是ie11并不支持preserve-3dperspective也要加在父级上，使动画具有透视效果；- 要给父级也加上宽高，否则动画没有效果
<style>#box{ margin: 70px auto; width: 300px; height: 200px; //父级要加宽高，否则旋转基点会很离谱 transform-style: preserve-3d; //preserve-3d加在父级上 transform-origin: 50px 100px; transition: 0.3s linear; position: relative; perspective: 500px; //perspective也要加在父级上}#box div{ width: 300px; height: 200px; font: 50px/100px arial; text-align: center; position: absolute;}#box div:nth-of-type(1){ background: url(1.jpg);}#box div:nth-of-type(2){ background: url(2.jpg); transform: translatez(1px);}#box:hover{ transform: rotateY(180deg);}</style><script></script></head><body> <div id="box"> <div>1</div> <div>2</div> </div></body>
浙公网安备 33010602011771号