猥琐的3D相册

很多小白不会做相册有时还会被女朋友骂,去求助抖音大神却被拒之门外,有些小白也会性情不好,下面就是一段3D相册的代码,将其中的图片替换过来就行,感谢支持!

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>相册</title>
<style type="text/css"> 
   *{margin: 0;padding: 0;} 
   
      .wrap{width: 600px;height: 400px;margin: 200px auto;} 
       .box{width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;} 
        .box>div{width: 200px;height: 200px;font-size: 60px;opacity: .5;position: absolute;top: 0;left: 0;transition: all 1s;}
          .box img{width: 200px;height: 200px;} 
          .left{transform: rotateY(90deg) translateZ(-100px);} 
          .right{transform: rotateY(90deg) translateZ(100px);}
          .top{transform: rotateX(90deg) translateZ(100px);} 
          .bottom{transform: rotateX(90deg)translateZ(-100px);}
          .after{transform: translateZ(-100px);}
          .before{transform: translateZ(100px);} 
          .wrap 
          .box:hover
           .left{transform: rotateY(90deg) translateZ(-160px);} 
          .wrap
           .box:hover
            .right{transform: rotateY(90deg) translateZ(160px);}
          .wrap 
          .box:hover
           .top{transform

猜你喜欢

转载自blog.csdn.net/qq_46228433/article/details/106950252