最近写驾驶舱的时候琢磨了一个问题，就是单纯的使背景 图片旋转 的一定的角度。 只通过 CSS 3的transfrom让整个容器都翻转了一定的角度，达不到我想要的效果。 然后通过研究和参考相关文章总算实现了这个效果，话不多说，上代码。 二、代码实现 HTML模板如下 <div class="smart_development_right"> <div class="smart_development_content"> CSS 翻转图片主要用到的技术除了3D翻转和定位 ，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。效果图如下：具体的步骤如下：1、写出页面主体， 2、通过定位使两张图片叠加在一起div img { width: 250px; height: 170px; position: absolute; top: 0; le... 1.html结构:&lt;div class="test"&gt; &lt;img class="one" src="./images/hotlink01.png" alt=""&gt; &lt;img class="two" src="./images/hotlink01_h.png" alt=""& 因为不断有人问我，现在我补充一下：IE是支持这种技术的！尽管会很麻烦。需要做的是旋转front和back元素，而不是旋转整个容器元素。如果你使用的是最新版的IE，可以忽略这一节。IE10+是支持的，IE9完全不支持 CSS 动画。 CSS 动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果。其中代表性的一种就是 CSS 图片翻转效果 html代码<ul class="flatflipbuttons"> <li><a href="http://www.w2bc.com" title="Search"><span class="icon-search"></span> </a><b>Search</b></li> <li><a href="http://www.