Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > html实现图片旋转显示背面内容

html实现图片旋转显示背面内容

浏览: 作者:Datehoer 发布日期:2020-12-16 21:45:28 来源: 原创
其实说是html,实际上还是要通过css来实现具体效果的,毕竟实际上html是框架,而css则是填充框架的东西。这篇文章是介绍一个简单的案例,鼠标触碰图片,然后图片发生旋转,进而展现文字。
可以看一下动图演示。

html实现图片旋转显示背面内容
其实这个是通过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" alt="">
            </div>
            <div class="box hip">
                <h3>浓缩咖啡</h3>
            </div>
        </div>
        <div class="fu">
            <div class="box face">
                <img src="2.jpg" alt="">
            </div>
            <div class="box hip">
                <h3>浓缩咖啡</h3>
            </div>
        </div>
        <div class="fu">
            <div class="box face">
                <img src="3.jpg" alt="">
            </div>
            <div class="box hip">
                <h3>浓缩咖啡</h3>
            </div>
        </div>
        <div class="fu">
            <div class="box face">
                <img src="4.jpg" alt="">
            </div>
            <div class="box hip">
                <h3>浓缩咖啡</h3>
            </div>
        </div>
    </div>
</body>
具体详情内容可以通过上面的代码进行自我测试,其实最容易实现效果的就是先全部复制上去,然后再将不明白的属性给加上注释,查看发生了什么变化,如果没有变化,可以先记下来然后继续注释别的内容,最后将实在不明白效果的复制到百度进行查询。
如果有什么不懂的可以在评论区留言,我会在看到的第一时间进行回复的。

版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/91.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!