<div class="mainbody">

<span style="font-size:16px;">
    其实说是html,实际上还是要通过css来实现具体效果的,毕竟实际上html是框架,而css则是填充框架的东西。这篇文章是介绍一个简单的案例,鼠标触碰图片,然后图片发生旋转,进而展现文字。
    <br />
    可以看一下动图演示。
</span>
<br />
<img alt="html实现图片旋转显示背面内容" src="/img/htmltpxz01.gif" style="width: 800px; height: 208px;"
/>
<br />
<span style="font-size:16px;">
    其实这个是
    <span style="color:#ff0000;">
        通过transform旋转以及backface-visibiliity来实现图片隐藏的
    </span>
    。
    <br />
    简单介绍一下这个html实现图片旋转显示背面文字的案例思路。
    <br />
    首先是创建一个框架,用来储存这些图片以及文字。
    <br />
    然后将搭配的图片文字储存在同一个div里,用以日后的地位修改。
    <br />
    然后接下来先将文字进行旋转180&deg;,之后设置hover属性即可,之所以要设置先旋转180&deg;是因为如果不设置的话,那么图片旋转之后实现的效果就会使反向的,文字变成反向的文字,而我们事先旋转后,再进行触碰旋转的话,则会使的文字正向了。
    <br />
    主要用到的还是上面两个属性,
    <strong>
        <span style="color:#ff0000;">
            一个transform: rotateY(180deg);这个是设置内容旋转180&deg;,然后再一个是backface-visibility:
            hidden;这个是隐藏旋转的内容的背面
        </span>
    </strong>
    ,也就是你旋转之后,不会显示东西,这样子可以实现上面的效果了。
</span>
<br />
<blockquote>
    <div>
        &lt;style&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; * {
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; }
    </div>
    <div>
        &nbsp;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; body {
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #0d3462;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; }
    </div>
    <div>
        &nbsp;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; .wutai {
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 760px;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 220px;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 100px auto;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; }
    </div>
    <div>
        &nbsp;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; .fu {
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 170px;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 190px;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 10px;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: 1.5s;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform-style: preserve-3d;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; }
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; .fu:hover {
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotateY(180deg);
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; }
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; .box {
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* position: absolute; */
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 170px;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 190px;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; }
    </div>
    <div>
        &nbsp;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; .face {
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid #4b2518;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backface-visibility: hidden;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; }
    </div>
    <div>
        &nbsp;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; .hip {
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid white;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #4b2518;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotateY(180deg);
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backface-visibility: hidden;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; }
    </div>
    <div>
        &nbsp; &nbsp; &lt;/style&gt;
    </div>
</blockquote>
<br />
<blockquote>
    <div>
        &lt;body&gt;
    </div>
    <div>
        &nbsp; &nbsp; &lt;div class=&quot;wutai&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;fu&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;box face&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;1.jpg&quot;
        alt=&quot;&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;box hip&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;浓缩咖啡&lt;/h3&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;fu&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;box face&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;2.jpg&quot;
        alt=&quot;&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;box hip&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;浓缩咖啡&lt;/h3&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;fu&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;box face&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;3.jpg&quot;
        alt=&quot;&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;box hip&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;浓缩咖啡&lt;/h3&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;fu&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;box face&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;4.jpg&quot;
        alt=&quot;&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;box hip&quot;&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;浓缩咖啡&lt;/h3&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &nbsp; &nbsp; &lt;/div&gt;
    </div>
    <div>
        &lt;/body&gt;
    </div>
</blockquote>
<span style="font-size:16px;">
    具体详情内容可以通过上面的代码进行自我测试,其实最容易实现效果的就是先全部复制上去,然后再将不明白的属性给加上注释,查看发生了什么变化,如果没有变化,可以先记下来然后继续注释别的内容,最后将实在不明白效果的复制到百度进行查询。
    <br />
    如果有什么不懂的可以在评论区留言,我会在看到的第一时间进行回复的。
</span>

</div>

最后修改:2021 年 04 月 04 日 01 : 07 PM
如果觉得我的文章对你有用,请随意赞赏