描述：运行该文件则可以看到一个旋转的相册，其中一静态图如下图所示：
当鼠标点击其中任意图片后会暂停动画，该选中图片会灰度化（值为30%）且会实现图片水平反转。
代码实现如下：
<!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>我的个人相册</title><style>*{ padding: 0; margin: 0; border: none; outline: none; box-sizing: border-box; } *:before,*:after{ box-sizing: border-box; } html {height: 100%;width: 100%;overflow: hidden;background: url(images/background2.jpg) no-repeat 0px 0px;background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;}body {height: 85%;display: flex;align-items: center;}.Container{ margin: 4% auto; width: 240px; height: 150px; position: relative; perspective: 1000px; } #show_jpg{ width: 100%; height: 100%; position: absolute; transform-style:preserve-3d; animation: rotation 20s infinite linear; } #show_jpg:hover{ animation-play-state: paused; } img:hover{ filter: grayscale(30%);transform: scale(-1,1); } #show_jpg figure{ display: block; position: absolute; width: 140px; height: 210px; left: 10px; top: 10px; overflow: hidden; border: solid 1px white; } img{ cursor: pointer; transition:all 0.3s ease 0s; width: 140px; height: 210px; } #show_jpg figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);} #show_jpg figure:nth-child(2) { transform: rotateY(50deg) translateZ(288px);} #show_jpg figure:nth-child(3) { transform: rotateY(100deg) translateZ(288px);} #show_jpg figure:nth-child(4) { transform: rotateY(150deg) translateZ(288px);} #show_jpg figure:nth-child(5) { transform: rotateY(200deg) translateZ(288px);} #show_jpg figure:nth-child(6) { transform: rotateY(250deg) translateZ(288px);} #show_jpg figure:nth-child(7) { transform: rotateY(300deg) translateZ(288px);} @keyframes rotation{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } </style><script>window.onload=function(){var showimg = document.getElementById('show');}</script></head><body ><p id="show"></p><div class="Container"><div id="show_jpg"> <figure><img src="images/1.jpg" ></figure><figure><img src="images/2.jpg"></figure> <figure><img src="images/3.jpg" ></figure> <figure><img src="images/4.jpg" ></figure> <figure><img src="images/5.jpg"></figure> <figure><img src="images/6.jpg" ></figure> <figure><img src="images/7.jpg" ></figure> </div> </div> </body></html>
