css【3D旋转相册】-源码--超级简单

**

css【3D旋转相册】-源码–超级简单

**

1.可以拿来装逼,

css【3D旋转相册】-源码--超级简单_第1张图片


css【3D旋转相册】-源码--超级简单_第2张图片

css


*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;
    overflow: hidden;
    background-color: #333;
    perspective: 1200px;
}
.continent{
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 200px;
    height: 300px;
    animation: move 14s linear infinite;
}
@keyframes move {
    0%{
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
}
.item{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 200px;
    height: 300px;
    background-color: aqua;
    //倒影
    -webkit-box-reflect: below 10px linear-gradient(transparent, white);
}
.img1{
    background-image: url(./1.jpg);
    background-size: cover;
    transform: rotateY(60deg) translateZ(400px);
}
.img2{
    background-image: url(./2.jpg);
    background-size: cover;
    transform: rotateY(120deg) translateZ(400px);
}
.img3{
    background-image: url(./3.jpg);
    background-size: cover;
    transform: rotateY(180deg) translateZ(400px);
}
.img4{
    background-image: url(./4.jpg);
    background-size: cover;
    transform: rotateY(240deg) translateZ(400px);
}
.img5{
    background-image: url(./5.jpg);
    background-size: cover;
    transform: rotateY(300deg) translateZ(400px);
}
.img6{
    background-image: url(./6.jpg);
    background-size: cover;
    transform: rotateY(360deg) translateZ(400px);
}

html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="continent">
      <div class="item img1"></div>
      <div class="item img2"></div>
      <div class="item img3"></div>
      <div class="item img4"></div>
      <div class="item img5"></div>
      <div class="item img6"></div>
    </div>
  </body>
</html>

你可能感兴趣的:(javaScript特效,css,3d,css3)