css3 实现正反面翻转效果动画

淡淡的烟草味﹌ 2022-03-14 08:20 908阅读 0赞

分享一下正反面的翻转的动画效果的实现，使用了css3的一些属性；

在目前的移动端中使用还是可以的，但是pc端需要注意IE的兼容问题；

下面翻转了一个<p/>元素，没有使用图片，需要使用图片替换成图片即可；

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>3D翻转效果的实现</title>
        <style type="text/css">
            .reversal {
                width:200px;
                height:200px; 
                border: 1px solid red; 
                margin:0 auto; 
                position: relative;
            }
            .face,.back {
                width:200px; 
                height:200px; 
                position: absolute; 
                text-align: center;  
                line-height: 200px;   
                backface-visibility: hidden; 
                transform-style: preserve-3d; 
                transition: transform 2s; 
            }
            .face{transform: rotateY(0deg);}
             .back{transform: rotateY(-180deg);}
            .reversal:hover .back{transform:rotateY(0deg);}
            .reversal:hover .face{transform:rotateY(180deg);}
        </style>
    </head>
    <body>
        <div class="reversal">
            <p  class="face">正面</p>
            <p  class="back">反面</p>
        </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，908人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3动画效果二

nimation CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所

「爱情、让人受尽委屈。」/ 2022年09月25日 03:23/ 0 赞/ 231 阅读

相关 css3 按钮翻转效果

css3 按钮翻转效果 ![css3 按钮翻转][css3] ![css3 按钮翻转][css3 1] ![css3 按钮翻转][css3 2] html

末蓝、/ 2022年09月03日 07:19/ 0 赞/ 211 阅读

相关 css3动画抖动效果

html结构： <div class="top"> <a href="\"> <div>

深碍√TFBOYSˉ_/ 2022年08月07日 02:39/ 0 赞/ 461 阅读

相关制作翻转效果动画

经测试改动画在移动端兼容有一些问题，要兼容移动端可前往[https://blog.csdn.net/u012011360/article/details/92766950][h

女爷i/ 2022年08月04日 04:08/ 0 赞/ 151 阅读

相关 css3实现图片3d翻转效果

1.html部分 <body> <div class="main"> <div class="w"> <div clas

梦里梦外;/ 2022年06月17日 10:24/ 0 赞/ 250 阅读

相关 CSS 3D翻转卡片动画

原文链接： [http://caibaojian.com/3d-flip-card.html][http_caibaojian.com_3d-flip-card.html]

阳光穿透心脏的1/2处/ 2022年06月17日 02:19/ 0 赞/ 228 阅读

相关 css3动画效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 02:44/ 0 赞/ 269 阅读

相关 css3 实现正反面翻转效果动画

分享一下正反面的翻转的动画效果的实现，使用了css3的一些属性；在目前的移动端中使用还是可以的，但是pc端需要注意IE的兼容问题；下面翻转了一个<p/>元素，没有使用图

淡淡的烟草味﹌/ 2022年03月14日 08:20/ 0 赞/ 909 阅读

相关 Css3动画切换效果

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年3月21日实在不知道写什么，就翻了老师给的一些css样式看看有什么好玩的，老师用伪类做了一个鼠标移入到d

浅浅的花香味﹌/ 2022年02月26日 13:56/ 0 赞/ 361 阅读

相关 css实现3D立体视频翻转动画

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一世哀愁。/ 2021年07月26日 15:35/ 0 赞/ 433 阅读