HTML5 - 3D 旋转相册 - Powered by Discuz! Archiver

做人不能太渣 發表於 2019-9-14 11:08:00

HTML5 - 3D 旋转相册

前一段时间，突然看到一个炫酷的3D旋转相册，这里记录一下，先看效果图：
<img src="https://img2018.cnblogs.com/blog/1152824/201909/1152824-20190914110612599-131038781.gif" alt="" width="678" height="272">
HTML5 代码如下：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>HTML5 3D旋转图片相册可鼠标悬停</title>
<style text="text/css">
 * {
 padding: 0;
 margin: 0;
 border: none;
 outline: none;
 box-sizing: border-box;
 }

 *:before,
 *:after {
 box-sizing: border-box;
 }

 html,
 body {
 min-height: 100%;
 }

 body {
 background-image: radial-gradient(mintcream 0%, lightgray 100%);
 ;
 }

 .Container {
 margin: 4% auto;
 width: 210px;
 height: 140px;
 position: relative;
 perspective: 1000px;
 }

 #carousel {
 width: 100%;
 height: 100%;
 position: absolute;
 transform-style: preserve-3d;
 animation: rotation 20s infinite linear;
 }

 #carousel:hover {
 animation-play-state: paused;
 }

 #carousel figure {
 display: block;
 position: absolute;
 width: 220px;
 height: 120px;
 left: 10px;
 top: 10px;
 background: black;
 overflow: hidden;
 border: solid 5px black;
 }

 img {
 filter: grayscale(1);
 cursor: pointer;
 transition: all 0.3s ease 0s;
 width: 100%;
 height: 100%;
 }

 img:hover {
 filter: grayscale(0);
 transform: scale(1.2, 1.2);
 }

 #carousel figure:nth-child(1) {
 transform: rotateY(0deg) translateZ(288px);
 }

 #carousel figure:nth-child(2) {
 transform: rotateY(60deg) translateZ(288px);
 }

 #carousel figure:nth-child(3) {
 transform: rotateY(120deg) translateZ(288px);
 }

 #carousel figure:nth-child(4) {
 transform: rotateY(180deg) translateZ(288px);
 }

 #carousel figure:nth-child(5) {
 transform: rotateY(240deg) translateZ(288px);
 }

 #carousel figure:nth-child(6) {
 transform: rotateY(300deg) translateZ(288px);
 }

 @keyframes rotation {
 from {
 transform: rotateY(0deg);
 }
 to {
 transform: rotateY(360deg);
 }
 }
</style>
</head>

<body>
<div class="Container">
 <div id="carousel">
 <figure><img src="img/1.jpg" alt=""></figure>
 <figure><img src="img/2.jpg" alt=""></figure>
 <figure><img src="img/3.jpg" alt=""></figure>
 <figure><img src="img/4.jpg" alt=""></figure>
 <figure><img src="img/5.jpg" alt=""></figure>
 <figure><img src="img/6.jpg" alt=""></figure>
 </div>
</div>
</body>

</html></pre>
</div>
  
来源：https://www.cnblogs.com/zhoux955792/p/11518627.html

頁: [1]

琼殿技术论坛's Archiver

HTML5 - 3D 旋转相册