其他分享
首页 > 其他分享> > CSS 3D图片翻转 ——3D Flipping Effect

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

作者：互联网

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

<!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