其实说是HTML,实际上还是要通过CSS来实现具体效果的,毕竟实际上HTML是框架,而CSS则是填充框架的东西。这篇文章是介绍一个简单的案例,鼠标触碰图片,然后图片发生旋转,进而展现文字。
可以看一下动图演示:
其实这个是通过transform旋转以及backface-visibiliity来实现图片隐藏的。
简单介绍一下这个HTML实现图片旋转显示背面文字的案例思路。
首先是创建一个框架,用来储存这些图片以及文字。然后将搭配的图片文字储存在同一个div里,用以日后的地位修改。然后接下来先将文字进行旋转180°,之后设置hover属性即可。之所以要设置先旋转180°是因为如果不设置的话,那么图片旋转之后实现的效果就会使反向的,文字变成反向的文字,而我们事先旋转后,再进行触碰旋转的话,则会使的文字正向了。
主要用到的还是上面两个属性,一个是transform: rotateY(180deg);
这个是设置内容旋转180°,然后再一个是backface-visibility: hidden;
这个是隐藏旋转的内容的背面,也就是你旋转之后,不会显示东西,这样子可以实现上面的效果了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
| <style> * { margin: 0; padding: 0; } body { background-color: #0d3462; } .wutai { width: 760px; height: 220px; margin: 100px auto; } .fu { width: 170px; height: 190px; margin: 10px; transition: 1.5s; transform-style: preserve-3d; float: left; position: relative; } .fu:hover { transform: rotateY(180deg); } .box { width: 170px; height: 190px; position: absolute; } .face { border: 2px solid #4b2518; backface-visibility: hidden; } .hip { border: 2px solid white; background-color: #4b2518; color: white; text-align: center; transform: rotateY(180deg); backface-visibility: hidden; } </style> <body> <div class="wutai"> <div class="fu"> <div class="box face"> <img src="1.jpg" alt=""> </div> <div class="box hip"> <h3>浓缩咖啡</h3> </div> </div> <!-- 其他图片和文字部分 --> </div> </body>
|
具体详情内容可以通过上面的代码进行自我测试,其实最容易实现效果的就是先全部复制上去,然后再将不明白的属性给加上注释,查看发生了什么变化,如果没有变化,可以先记下来然后继续注释别的内容,最后将实在不明白效果的复制到百度进行查询。
如果有什么不懂的可以在评论区留言,我会在看到的第一时间进行回复的。