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

最新推荐文章于 2024-05-22 11:43:55 发布

cvper

最新推荐文章于 2024-05-22 11:43:55 发布

阅读量7.3k

点赞数 3

分类专栏：实例分享文章标签：翻转 css3 动画

本文链接：https://blog.csdn.net/cvper/article/details/88095752

版权

实例分享专栏收录该内容

8 篇文章 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>

cvper

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
css3 实现正反面翻转效果动画

分享一下正反面的翻转的动画效果的实现，使用了css3的一些属性；在目前的移动端中使用还是可以的，但是pc端需要注意IE的兼容问题；下面翻转了一个&lt;p/&gt;元素，没有使用图片，需要使用图片替换成图片即可；代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UT...
复制链接

扫一扫