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函数分类及操作

    为什么使用函数? 答:函数的返回值可以确切知道整个函数执行的结果   函数的定义:1.数学意义的函数:两个变量:自变量x和因变量y,二者的关系                      2.Pytho ...

  2. JVM内存模型和GC机制

    目录 1.JVM内存模型 2.GC 1.JVM内存模型 堆,栈,本地方法栈,方法区,程序计数器 2.GC 新生代收集器:Serial(单线程).ParNew.Parallel Scavenge: 老年 ...

  3. 8.2 GOF设计模式一: 单实例模式 SingleTon

    GOF设计模式一: 单实例模式 SingleTon  整个美国,只有一个“现任美国总统”  比如,在学校,“老师”,有数百个:“校长”,只有一个  系统运行时,如何保证某个类只允许实例化一个对象 ...

  4. UML图概述

    UML图概述 UML是一种分析设计语言,即一种建模语言.UML是由图形符号表达的建模语言,其结构主要包括视图.图.模型元素和通用机制四部分. UML包括5种视图,分别是用户视图.结构视图.行为视图.实 ...

  5. js点击加载更多可以增加几条数据的显示

      <div class="list"> <div class="one"> <div class="img" ...

  6. 从零开始学习Java多线程(二)

    前面已经简单介绍进程和线程,为后续学习做铺垫.本文讨论多线程传参,Java多线程异常处理机制. 1. 多线程的参数传递 在传统开发过程中,我们习惯在调用函数时,将所需的参数传入其中,通过函数内部逻辑处 ...

  7. vue中是使用富文本编辑器vue-quill-edit

    之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便 近期项目vue单页面,就使用这个编辑器组件吧! 一.安装  cnpm install vue-quill-editor 二. ...

  8. shell脚本 快照还原Hbase数据库

    #!/bin/bash for i in $(cat ./hbaseTable);do echo "disable '$i'" | hbase shellecho "re ...

  9. win10释放的wifi热点手机连不上

    直入正题吧…… 在win10的搜索框里输入ser,找到“windows服务”选项,点击进入,如下图 找到下图所示的两个服务,然后,右键,属性,启动类型改为自动,然后点确定,确定完以后,再右键,点启动, ...

  10. mysql权限参考

    mysql日常管理和应用工作中,大家经常会涉及到授权问题,下面,我们就列举下权限相关的参考. 1.管理权限(Administrative Privileges) Privilege Name      ...