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. Python自学:第三章 使用del语句删除元素

    motorcycles = ["honda", "yamaha", "suzuki"] print(motorcycles) del mot ...

  2. Activity的介绍

    Activity类是Android应用程序的重要组成部分,activity的启动和组合方式是平台应用程序模型的基本组成部分.Android系统通过调用与其生命周期的特定阶段相对应的特定回调方法来启动A ...

  3. js 获取昨天，今天，本周，上周，季度等时间范围（封装的js）

    (function ($, ht) { "use strict"; $.extend(ht, { clickTimeRange:function(){ //点击重置按钮,时间文本框 ...

  4. Python3 NameError: name 'open' is not defined处理办法

    一.说明 之前默认以为python的open方法用存哪里都没什么区别的,然后昨天直接在"__del__()"中使用今天同事跑程序时反馈程序报错“Python3 NameError: ...

  5. srping的历史与哲学

    历史: 要谈Spring的历史,就要先谈J2EE.J2EE应用程序的广泛实现是在1999年和2000年开始的,它的出现带来了诸如事务管理之类的核心中间层概念的标准化,但是在实践中并没有获得绝对的成功, ...

  6. BZOJ2662 [BeiJing wc2012]冻结

    网上的题解都是分层图+spfa或者dijkstra 我觉得dijk太难写了,懒得写,看了一下数据范围$N=50$,这显然是出题人勾引人犯罪 我决定使用floyd的做法,令$f[i][j][t](k)$ ...

  7. spyder中让生成的图像单独在窗口中显示

    IPython 支持两种形式的绘图 终端输出图像新窗口输出图像方式 1 能够非常方便的保存输出记录(如将`IPython 终端输出转换成 Html 文件) 方式 2 则可以交互式的放大.拖动图片,并且 ...

  8. python修炼第三天

    今天主要讲了文件操作,函数与装饰器,装饰器比较烧脑,需要多做练习,逐步分解来进行理解!    加油! 一 文件操作 操作系统 提供文件的概念可以操作磁盘. 文件的只读模式: 注意如果是windows ...

  9. 寄存器（cpu工作原理）（一）

    cpu概述 一个典型的cpu由运算器.控制器.寄存器等器件组成,这些器件靠内部总线相连. 区别 内部总线实现cpu内部各个器件之间的联系 外部总线实现cpu外部和主板上其他器件的联系 8060cpu有 ...

  10. Vue学习Day002

    内联处理器的操作 除了直接绑定到一个方法,也可以在内联JavaScript语句中调用方法 <div id="example-3"> <button v-on:cl ...