css卡牌翻转效果

最新推荐文章于 2024-12-04 08:56:45 发布

Crushrrr

最新推荐文章于 2024-12-04 08:56:45 发布

阅读量1.4k

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/gg451516921/article/details/79133109

版权

css 专栏收录该内容

5 篇文章

订阅专栏

卡牌翻转的步骤：

1.最外层wrap设置视图距离perspective:800px;相对定位position: relative

2.父级#box设置转换为3d效果transform-style:preserve-3d;

3.旋转元素设置：背景不透视 backface-visibility: hidden;rotateY为0

4.另一个旋转元素：rotateY为180deg

代码如下：

html部分

<div id="wrap">
        <div id="box">
            <p>世界那么大</p>
            <p>我想去看看</p>
        </div>
    </div>

css部分：

#wrap {width: 600px;height: 600px;background: #ccc; margin: 0 auto;position: relative;perspective:800px;}
    #box {position: absolute;left: 100px;width: 400px;height: 400px;border: 1px solid #000;transform-style:preserve-3d; }
    #box p {width: 100%;height: 100%;position: absolute;left: 0;top: 0;font-size: 28px; backface-visibility: hidden;color: #fff}
    #box p:nth-of-type(1) {background: blue;transition:.8s transform}
    #box p:nth-of-type(2) {background: red;transform:rotateY(-180deg);transition:.8s transform}
    #box:hover p:nth-of-type(1) {transform:rotateY(180deg);}
    #box:hover p:nth-of-type(2) {transform:rotateY(0deg);}