千丝海阁

tiandi在网页设计方面一直不怎么在行，所以最近努力在学习css的transform技巧。学习的同时也随便小小的实践一下某些功能效果，这两天主要研究了下transform-style的用法，顺便秀一下我女儿。

transform-style: flat|preserve-3d;

flat： 子元素将不保留其 3D 位置。

preserve-3d： 子元素将保留其 3D 位置。

下面三个实例用的都是同样的代码，代码里加载了两张图片，只是样式有些许不同，只有第二个实例才会实现两张图片翻转效果，通过这三个实例，可以看出transform-style的效果。

第一张是没有用transform-style的：直接看到了翻转后的结果，而翻转的过程是没有效果的。

第二张是用了transform-style:preserve-3d的：2张图片交替进行3D效果翻转

最后这张是用了transform-style:flat的：虽然有了3D翻转效果，但是没有实现2张图片交替。

这里只提供上面实例中第2例的代码：

<style>
.flip .rotate{
position:absolute;
width: 280px;
height: 420px;
/*   preserve-3d    */
-moz-transform-style: preserve-3d;   
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; 
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}

.flip .rotate > *{ 
position:absolute;

/*   翻转后隐藏   */
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

.rotate .next { 
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}

.rotate:hover {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
</style>

<div class="flip">
	<div class="rotate">
		<img src="http://www.tiandiyoyo.info/wp-content/gallery/naomao-20-months/nEO_IMG_IMG_1171j.jpg" width=280px height=420>
		<div class="next" >
			<img src="http://www.tiandiyoyo.info/wp-content/gallery/naomao-20-months/nEO_IMG_IMG_8582z.jpg" width=280px height=420>
		</div>
	</div>
</div>

---