CSS 3D图片翻转 ——3D Flipping Effect

2019-10-21 20:03:44 阅读：332 来源： 互联网

标签：800px Effect color back Flipping perspective background height 3D

效果：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3D Flipping Effect</title>
  <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   
   body{
    height: 100vh;
    background-color: #bdc3c7;
    color: white;
   }
   
   .middle{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }
   
   .wrap{
    width: 300px;
    height: 500px;
    position: relative;
   }
   .wrap h2{
    font-size: 40px;
    margin-bottom: 20px;
   }
   
   .front , .back{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../img/bg.jpg);
    background-size: cover;
    backface-visibility: hidden;
    box-shadow: 0 0 10px #2c3e50;
    transition: .8s;
   }
   
   .front{
    transform: perspective(800px) rotateY(0deg);
   }
   
   .back{
    transform: perspective(800px) rotateY(180deg);
   }
   
   .back .contact-info{
    margin-top: 10px;
   }
   
   .back .contact-info a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    color: #d1d8e0;
    border-radius: 50%; 
   }
   
   .back .contact-info a:hover{
    color: white;
    background-color: #4a69bd;
   }
   
   .wrap:hover .front{
    transform: perspective(800px) rotateY(-180deg);
   }
   
   .wrap:hover .back{
    transform: perspective(800px) rotateY(0deg);
   }
  </style>
 </head>
 <body class="middle">
  <div class="wrap">
   <div class="front middle">
    <h2>愿意</h2>
    <h3>用一支黑色的铅笔</h3>
    <h3>画一出沉默舞台剧</h3>
   </div>
   
   <div class="back middle">
    <h2>愿意</h2>
    <h3>在角落唱沙哑的歌</h3>
    <h3>再大声也都是给你</h3>
    <div class="contact-info">
     <a href="#"><i class="iconfont icon-weibo"></i></a>
     <a href="#"><i class="iconfont icon-weixin"></i></a>
     <a href="#"><i class="iconfont icon-tuite"></i></a>
     <a href="#"><i class="iconfont icon-youtube"></i></a>
    </div>
   </div>
  </div>
  
 </body>
</html>

标签：800px,Effect,color,back,Flipping,perspective,background,height,3D
来源： https://www.cnblogs.com/alongz/p/11715641.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS 3D图片翻转 ——3D Flipping Effect