最近学了妙味的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>
时间： 2024-10-24 19:18:35