CSS技巧:利用preserve-3d制作带有3D效果的图片翻转 – 千丝海阁

首页 » HTML/CSS » CSS技巧:利用preserve-3d制作带有3D效果的图片翻转

CSS技巧:利用preserve-3d制作带有3D效果的图片翻转

5578 19

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>
文章评分1次,平均分5.0

本文原始地址:https://www.tiandiyoyo.com/2013/07/css-effect-preserver-3d/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


19 Comments

  1. 不错的代码,顺便发现,博主的女儿很可爱哦~

  2. 此文甚妙,希望博主继续发扬美文精神~[2013年8月9日下午6:26:06]

  3. 确实是第二种比较适合常用,

  4. Alex :

    好可爱。第二种我喜欢。

  5. 刚开始没看定,点了下图才知道怎么回事。感觉第二种效果比较酷

  6. 南寻 :

    第二张图好帅气哈~

  7. 首页在IE10下貌似错版了,难道是你的特殊效果?

  8. 子木 :

    纯技术的博客不好做,支持你!

  9. 那些 IE 用户又得抹泪飘过了。。。

  10. 神父 :

    好复杂,好高端

  11. 弱者 :

    很好呢~学习了~

  12. 怎么左侧被挤到下面去了?

    • tiandi :

      文章页的样式最后用js调整的,js之前有cnzz计数器,这个计数器有时候调用会很慢,就会导致样式的js会延迟加载。

  13. Faris :

    提个小小的建议,右侧悬浮模块有点靠上,建议调整一下~~

  14. Faris :

    来回踩了~~顺便来学习一下~~~~

载入分页评论...