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. jquery表单提交获取数据(带toast dialog)

    最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...

  2. text——文本属性大全

    一.文字颜色(color:red;) <style> body {color:red} h1 {color:greenyellow} p.color {color:blue} </s ...

  3. 笔记：stm32 printf重定向到UART疑点解析

    在调试过程中往往需要通过打印来看系统运行状态:在STM32平台上,打印重定向有多种实现方案:其一是编译时使用keil自带的MacroLIB,据说这个库对一些C语言基础设施做了新的实现,代码结构更加紧凑 ...

  4. JavaScript（ES6）学习笔记-Set和Map与数组和对象的比较（二）

    一.Map,Set,Array对比: 1.增 let map = new Map(); let set = new Set(); let array = []; map.set('t',1); //M ...

  5. 【cogs247】售票系统【线段树】

    售票系统 输入文件:railway.in 输出文件:railway.out 时间限制:1 s 内存限制:128 MB [问题描述] 某次列车途经C个城市,城市编号依次为1到C,列车上共有S个座位,铁路 ...

  6. SGD、GD

    GD参考: https://blog.csdn.net/CharlieLincy/article/details/70767791 SGD参考:https://blog.csdn.net/Charli ...

  7. vmstat监控工具

    vmstat监控工具 一.前言 很显然从名字中我们就可以知道vmstat是一个查看虚拟内存(Virtual Memory)使用状况的工具,但是怎样通过vmstat来发现系统中的瓶颈呢?在回答这个问题前 ...

  8. 使用walle部署laravel的时候问题记录

    1.使用walle部署laravel的时候检出后执行composer update提示 [RuntimeException]The HOME or COMPOSER_HOME environment ...

  9. Nginx做流媒体服务Windows版实现直播

    声明:网上有很多关于Linux系统的配置,这里就不记录了.刚开始搭建直播室,用的是Java语言, Java开源的流媒体服务有Red5,但是很久没更新了,而且文档较少不容易上手,对于直播功能相对要求较低 ...

  10. java AQS（AbstractQueuedSynchronizer）同步器详解

    除了内置锁(synchronized)外,java AQS(AbstractQueuedSynchronizer)同步器几乎是所有同步容器,同步工具类的基础.ReentrantLock.Reentra ...