其实说是html，实际上还是要通过css来实现具体效果的，毕竟实际上html是框架，而css则是填充框架的东西。这篇文章是介绍一个简单的案例，鼠标触碰图片，然后图片发生旋转，进而展现文字。
可以看一下动图演示。
其实这个是通过transform旋转以及backface-visibiliity来实现图片隐藏的。
简单介绍一下这个html实现图片旋转显示背面文字的案例思路。
首先是创建一个框架，用来储存这些图片以及文字。
然后将搭配的图片文字储存在同一个div里，用以日后的地位修改。
然后接下来先将文字进行旋转180°，之后设置hover属性即可，之所以要设置先旋转180°是因为如果不设置的话，那么图片旋转之后实现的效果就会使反向的，文字变成反向的文字，而我们事先旋转后，再进行触碰旋转的话，则会使的文字正向了。
主要用到的还是上面两个属性，一个transform: rotateY(180deg);这个是设置内容旋转180°，然后再一个是backface-visibility: hidden;这个是隐藏旋转的内容的背面，也就是你旋转之后，不会显示东西，这样子可以实现上面的效果了。
<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 {/* position: absolute; */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" ></div><div class="box hip"><h3>浓缩咖啡</h3></div></div><div class="fu"><div class="box face"><img src="2.jpg" ></div><div class="box hip"><h3>浓缩咖啡</h3></div></div><div class="fu"><div class="box face"><img src="3.jpg" ></div><div class="box hip"><h3>浓缩咖啡</h3></div></div><div class="fu"><div class="box face"><img src="4.jpg" ></div><div class="box hip"><h3>浓缩咖啡</h3></div></div></div></body>
具体详情内容可以通过上面的代码进行自我测试，其实最容易实现效果的就是先全部复制上去，然后再将不明白的属性给加上注释，查看发生了什么变化，如果没有变化，可以先记下来然后继续注释别的内容，最后将实在不明白效果的复制到百度进行查询。
如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。
更多请关注：Datehoer的Blog
原文：https://www.cnblogs.com/datehoer/p/14209899.html