css3实现翻牌效果

最新推荐文章于 2024-05-28 14:09:02 发布

coder丶东

最新推荐文章于 2024-05-28 14:09:02 发布

阅读量7.8k

点赞数 1

分类专栏： css 动画文章标签： css3 动画

本文链接：https://blog.csdn.net/github_37710255/article/details/78085544

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

动画

1 篇文章 0 订阅

订阅专栏

现场还原

在浏览网站时，偶然看到一个网站上有一个非常炫酷的翻转效果，于是思考这个动画效果是怎么实现的。

解决方案

先看html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">美女</div>
</body>
</html>

将类名为box的div作为牌的正面，并赋予3D变化属性和transition属性。

.box{
        position: relative;
        width:100px;
        height:100px;
        background: #fff;
        border-radius:5px;
        text-align: center;
        line-height:100px;
        text-shadow:1px 1px 1px #ccc;
        font-weight:800;
        cursor: pointer;
        box-shadow:1px 1px 10px 1px #ccc;

        /*上面是基础样式，根据需求修改，下面的代码实现3d翻转效果*/
        transform-style: preserve-3d;
        transition: all .8s;
    }

定义box的after伪类，将该伪类作为牌的反面。

.box:after{
        content: '';
        position: absolute;
        width:100px;
        height:100px;
        /*牌背面的图片*/
        background: url("images/dul_head.png");
        border-radius:5px;
        transform-origin:left ;
        box-shadow:1px 1px 10px 1px #ccc;

        /*将after伪类折叠到box的背面，作为牌的反面*/
        top:0;
        left:100px;
        transform:rotateY(180deg);
    }

最后定义鼠标移入时的翻转动画

.box:hover{
        transform:rotateY(180deg);
    }

这样简单的翻牌动画效果就做好了，本例相对Y轴翻转，如果想要根据X轴翻转，改变hover的transform属性即可。此外，对上诉方法进行相应的改变可以实现类似正方体的翻转效果，这里不做详细叙述。

coder丶东

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css3实现翻牌效果

现场还原在浏览网站时，偶然看到一个网站上有一个非常炫酷的翻转效果，于是思考这个动画效果是怎么实现的。解决方案先看html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="box">美女</div></bo
复制链接

扫一扫