CSS实现3D悬停相册

最新推荐文章于 2020-08-20 21:08:04 发布

你的负卿是我

最新推荐文章于 2020-08-20 21:08:04 发布

阅读量217

点赞数

分类专栏： web前端文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_43909373/article/details/108087804

版权

web前端专栏收录该内容

17 篇文章 10 订阅

订阅专栏

CSS实现3D悬停相册

css部分


          *{   margin: 0;  
             padding: 0; 
             outline: none; 
             border: none; 
             box-sizing: border-box; }
          html,body{   
                min-height: 100%; 
              }
          body{ 
              background-image: radial-gradient(mintcream 0%, lightgray 100%);
              }
          h2{
              display: table;
              margin: 5% auto 0;
              text-transform: uppercase;            /* uppercase定义只有大写字母  */
              font-family: "Times New Roman",Georgia,Serif;
              font-size: 3em;
              font-weight: 500;
              text-shadow: 0 1px white, 0 3px blue;
          }
          .container{
              width: 360px;
              height: 250px;
              position: relative;
              margin: 5% auto;
              perspective: 1000;
          }
          #rotatephoto{
              width: 100%;
              height: 100%;
              position: absolute;
              transform-style: preserve-3d;
              animation: rotation 20s infinite linear;
          }
          #rotatephoto:hover{
              animation-play-state: paused;
          }
          #rotatephoto figure{
              display: block;
              position: absolute;
              width: 350px;
              height: 188px;
              left: 10px;
              top: 10px;
              background: black;
              overflow: hidden;
              border: 5px solid black;
          }
          #rotatephoto figure:nth-child(1){  transform:  rotateY(0deg) translateZ(500px);}
          #rotatephoto figure:nth-child(2){  transform:  rotateY(40deg) translateZ(500px);}
          #rotatephoto figure:nth-child(3){  transform:  rotateY(80deg) translateZ(500px);}
          #rotatephoto figure:nth-child(4){  transform:  rotateY(120deg) translateZ(500px);}
          #rotatephoto figure:nth-child(5){  transform:  rotateY(160deg) translateZ(500px);}
          #rotatephoto figure:nth-child(6){  transform:  rotateY(200deg) translateZ(500px);}
          #rotatephoto figure:nth-child(7){  transform:  rotateY(240deg) translateZ(500px);}
          #rotatephoto figure:nth-child(8){  transform:  rotateY(280deg) translateZ(500px);}
          #rotatephoto figure:nth-child(9){  transform:  rotateY(320deg) translateZ(500px);}
 
          img{
              -webkit-filter: grayscale(1);     /* filter滤镜 */
              cursor: pointer;
              transition: all 0.8s ease;
          }
          img:hover{
              -webkit-filter: grayscale(0);
              transform: scale(1.3, 1.3);       /* scale缩放 */
          }
 
          @keyframes rotation{
              0%{
                  transform: rotateY(0deg);
              }
              100%{
                  transform: rotateY(360deg);
              }
          }

## HTML部分

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <h2>ZZY 3D Images Gallery</h2>
<div class="container">
     <div id="rotatephoto">
        <figure><img src="ig/1.jpg" alt=""></figure>
        <figure><img src="ig/2.jpg" alt=""></figure>
        <figure><img src="ig/3.jpg" alt=""></figure>
        <figure><img src="ig/4.jpg" alt=""></figure>
        <figure><img src="ig/5.jpg" alt=""></figure>
        <figure><img src="ig/6.jpg" alt=""></figure>
        <figure><img src="ig/7.jpg" alt=""></figure>
        <figure><img src="ig/8.jpg" alt=""></figure>
        <figure><img src="ig/9.jpg" alt=""></figure>

     </div>
</div>
</body>
</html>

实现效果
在这里插入图片描述
当鼠标放上面时候会从灰色变成彩色，并且放大不动试呈现横向循环播放