Web前端开发——CSS3之3D变换综合案例

1. 效果图

Web前端开发——CSS3之3D变换综合案例_第1张图片

Web前端开发——CSS3之3D变换综合案例_第2张图片

 鼠标未放在图片上时显示图片,鼠标悬停在任意一副图片上时图片翻转,显示文字

2. 思路

设置四个父层div标签,每个父层div包含图片和文字,舞台div表标签包含四个父层div标签。

这里的主要问题是图片盒子和文字盒子的摆放问题,一开始显示的是图片,翻转后是文字,因此我们让图片盒子和文字盒子重叠在一起,图片盒子在上层,文字盒子在下一层,如何使两张图片重合在一起呢?我们设置父层div为相对定位,子层图片和文字盒子为绝对定位,定位的上下左右属性四个方向值不设定默认为0,这样可以实现两个盒子的重叠。

那么如何实现图片在上盒子在下呢?在两个盒子重叠后,我们对文字盒子使用一个翻转功能,这里需要注意在父层div内图片盒子先写在前,文字盒子写在后,这样的话对文字实现一个翻转后它就跑到图片盒子下面,实现了图片在上文字在下后,再对包含图片和文字的盒子使用一个翻转功能,即可实现上述功能,




	
	Document
	


	

浓缩咖啡

卡布奇诺

拿铁

摩卡

那么如果在父层div内,文字写在前,图片写在后,不对文字使用翻转,这样也能使图片在上层,文字在下层,但是经过测试,这里鼠标悬停在图片上翻转还是图片,文字不见了,但若对在下层的文字使用翻转,这样却是可行的,这里推测的解释是如果不对下面的图层进行一定的操作,那么在同一个父容器内写在后面的盒子会覆盖掉前面的盒子,

你可能感兴趣的:(Web前端开发)