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">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.font.im/css?family=Modern+Antiqua" rel="stylesheet">    <link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.css" rel="stylesheet">
    <title>Document</title>
</head>
<body class="middle">
    <div class="wrap">
        <div class="front middle">
            <h2>Learn More</h2>
            <h3>hover me</h3>
        </div>

        <div class="back middle">
            <h2>TwitchTV</h2>
            <div class="contact-info">
                <a href="#"><i class="fab fa-google"></i></a>
                <a href="#"><i class="fab fa-twitch"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-facebook"></i></a>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

*{
    margin:;
    padding:;
}
body{
    height:100vh;
    background:#dcdde1;
    font-family: 'Modern Antiqua', cursive;
}
.middle{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.wrap{
    width:300px;
    height:500px;
    position: relative;
    cursor: pointer;
}
.wrap h2{
    font-size:40px;
    margin-bottom:10px;
}
.front, .back{
    width:100%;
    height:100%;
    position: absolute;
    background:url(./bg.png);
    background-size: cover;
    backface-visibility: hidden;
    box-shadow: 0 0 10px #353b48;
    transition: 0.8s;
}
.front{
    transform: perspective(800px) rotateY(0deg);
}
.back{
    transform: perspective(800px) rotateY(180deg);
}
.back .contact-info a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width:40px;
    height:40px;
    font-size:20px;
    margin:10px;
    text-decoration: none;
    color:#718093;
    border-radius: 50%;
}
.back .contact-info a:hover{
    color:white;
    background:#353b48;
}
.wrap:hover .front{
    transform: perspective(800px) rotateY(-180deg);
}
.wrap:hover .back{
    transform: perspective(800px) rotateY(0deg);
}

效果图：

CSS效果：3D卡片的更多相关文章

  1. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  2. html + css 01: 3d立方体

    html + css实现3d立方体 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /*** ...

  3. [转载] 高大上的 CSS 效果：Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  4. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  5. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  6. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  7. 一个纯CSS实现的卡片翻转效果

    先上代码 <div id="box"> <div class="front">正面</div> <div class= ...

  8. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  9. 【css】3d导航效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 日常记Bug

    前记:后端写代码应该对数据的交互更加掌握,不要被编码.数据模型细节坑住 Unicode编码.Django数据迁移偶尔产生的不稳定 处理细项工资记录模型: class TeachRoll(models. ...

  2. Docker中安装elasticsearch6.7.1

    先拉取镜像  docker pull docker.elastic.co/elasticsearch/elasticsearch:6.7.1    然后创建容器 (这是一条长的命令!!!)  dock ...

  3. anaconda的使用总结

    致python初学者:Anaconda入门使用指南 http://python.jobbole.com/87522/ Anaconda使用总结 http://python.jobbole.com/86 ...

  4. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Promise的两种处理异步的方式

    单个异步处理: let usedMemoryPromise = fetchUsedMemeory(); usedMemoryPromise.then(data => {...}) functio ...

  6. vue刷新路由，不刷新页面

    1.路由介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来 ...

  7. sql server中的varchar和Nvarchar有什么区别？

    很多开发者进行数据库设计的时候往往并没有太多的考虑char, varchar类型,有的是根本就没注意,因为存储价格变得越来越便宜了,忘记了最开始的一些基本设计理论和原则,这点让我想到了现在的年轻人,大 ...

  8. Hive中数据的导入与导出

    最近在做一个小任务,将一个CDH平台中Hive的部分数据同步到另一个平台中.毕竟我也刚开始工作,在正式开始做之前,首先进行了一段时间的练习,下面的内容就是练习时写的文档中的内容.如果哪里有错误或者疏漏 ...

  9. 牛客网第9场多校E（思维求期望）

    链接:https://www.nowcoder.com/acm/contest/147/E 来源:牛客网 题目描述 Niuniu likes to play OSU! We simplify the ...

  10. Qt核心机制与原理

    转:  https://blog.csdn.net/light_in_dark/article/details/64125085 ★了解Qt和C++的关系 ★掌握Qt的信号/槽机制的原理和使用方法 ★ ...