2022年 7 月 05日- (星期二) / Published in css 设计, html 设计, new code design, 前端设计

用3Dcss3 & Htm and js 制作悬停图片翻转特效【网页设计】cid1154

html and css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover effect</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
    
    <style>
    body{    
         background-color: #3f1e4d;
        height: 100vh;
        background-position: center;
        background-size: cover;
    font-family: 'Roboto Condensed', sans-serif;
        overflow: hidden;
    
}
    *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
 
.wrapper{
  width: 90%;
  margin: 0 auto;
  max-width: 80rem;
    margin-top: 84px;
}

.cols{
  display: -webkit-box;   
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
    
}

.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
    margin-left: -5px;
    margin-bottom: -5px;
}

.container{
        transform-style: preserve-3d;
      perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  background-position: center; 
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     backface-visibility: hidden;
  text-align: center;
  min-height: 280px;
  height: auto; 
  color: #fff;
  font-size: 1rem;
    border: 4px solid white;
    border-radius: 150px;
}

.back{
  background: #fff;  
  background: linear-gradient(45deg,  #3f1e4d 0%,#fff 100%);
}

.front:after{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
        
    backface-visibility: hidden;
     
}
.container:hover .front,
.container:hover .back{
     
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
     
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
  
    transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;     
    box-sizing: border-box;
    outline: 1px solid transparent;     
    perspective: inherit;
    z-index: 2;
}

.container .back{    
    transform: rotateY(180deg);     
    transform-style: preserve-3d;
}

.container .front{
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}

.container:hover .back{
   transform: rotateY(0deg);
   transform-style: preserve-3d;
}

.container:hover .front{
      transform: rotateY(-180deg);
      transform-style: preserve-3d;
}

.front .inner p{
  font-size: 1rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #fff;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: fff;   
  font-family: 'Roboto Condensed', sans-serif;   
  font-weight: 300;
}

@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}
    </style>
</head>
<body>
    
    <div class="wrapper">   
  <div class="cols">
      <div class="col">
        <div class="container">
          <div class="front" style="background-image: url(1.jpg)">
             
          </div>
          <div class="back">
            <div class="inner">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="container">
          <div class="front" style="background-image: url(2.jpg);">
           </div>
          <div class="back">
            <div class="inner">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="container">
          <div class="front" style="background-image: url(5.jpg);">
             
          </div>
          <div class="back">
            <div class="inner">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="container">
          <div class="front" style="background-image: url(4.jpg)">
             
          </div>
          <div class="back">
            <div class="inner">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="container">
          <div class="front" style="background-image: url(3.jpg)">
             
          </div>
          <div class="back">
            <div class="inner">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="container">
          <div class="front" style="background-image: url(004.jpg)">
              
          </div>
          <div class="back">
            <div class="inner">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="container">
          <div class="front" style="background-image: url(a5.jpg)">
           
          </div>
          <div class="back">
            <div class="inner">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="container">
          <div class="front" style="background-image: url(6.jpg)">
             
          </div>
          <div class="back">
            <div class="inner">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
 </div>
</body>
</html>

在线演示

让链接同时具备两种打开方式