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. Lab 9-3

    Analyze the malware found in the file Lab09-03.exe using OllyDbg and IDA Pro. This malware loads thr ...

  2. CF-95C-建图+最短路

    http://codeforces.com/problemset/problem/95/C n点m边(无向有权),每个点有一个司机(Ti,Ci)表示支付Ci元走Ti长度且必须停在节点才合法,一个司机只 ...

  3. 触发form表单的两种提交方式，submit和button的用法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交. 方法一: 在jsp的前端页面 ...

  4. javascript 中的number

    大家都知道javascript中有五种简单数据类型,number,string,boolean,null,undefined,复杂数据类型是object.本文主要记录下number类型的一些可能不太常 ...

  5. import com.sun.org.apache.xerces.internal.impl.dv.util.Base64报错

       该类不属于JDK标准库范畴,但在JDK中包含了该类,可以直接使用.但是在eclipse中直接使用却找不到该类. 以下是解决方法步骤: Properties-->JavaBulid Path ...

  6. go-ethereum源码分析 PartIII 共识流程

    A: js指令转化为新transaction 在web3上操作流程 1. import to web3 2. connect to peers 3. read local key store 4. d ...

  7. saltstack高效运维

    saltstack高效运维   salt介绍 saltstack是由thomas Hatch于2011年创建的一个开源项目,设计初衷是为了实现一个快速的远程执行系统. salt强大吗 系统管理员日常会 ...

  8. left join on 后and 和 where 的区别

    SELECT * FROM student a LEFT JOIN sc b ON a.Sid = b.Sid AND a.Sname="赵雷" 结果:(left join 左连接 ...

  9. vue双向数据绑定

    本文来源于 https://jingyan.baidu.com/article/91f5db1b0c2a4f1c7f05e3a8.html

  10. 考研计算机复试（广东工业大学C语言复试2018笔试题）（精华题选）

    1.obj文件是:(二进制文件) 2.函数func(float x){printf("%f",x+x);}的类型是() A.void B.int类型 C.无法确定 3.若有定义:i ...