<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3dPhoto</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: url(../img/wbg.png); } .box { width: 320px; height: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transform-style: preserve-3d; animation: im 20s linear infinite; } .box img { width: 100%; height: 100%; position: absolute; } @keyframes im{ 0% { transform: rotateY(0deg) rotateX(10deg); } 25% { transform: rotateY(90deg) rotateX(-10deg); } 50% { transform: rotateY(180deg) rotateX(10deg); } 75% { transform: rotateY(270deg) rotateX(-10deg); } 100% { transform: rotateY(360deg) rotateX(10deg); } } /*10张图片3d变换*/ .box img:nth-child(1) { transform: rotateY(0deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(2) { transform: rotateY(36deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(3) { transform: rotateY(72deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(4) { transform: rotateY(108deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(5) { transform: rotateY(144deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(6) { transform: rotateY(180deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(7) { transform: rotateY(216deg) translateZ(600px); backface-visibility:visible; } .box img:nth-child(8) { transform: rotateY(252deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(9) { transform: rotateY(288deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(10) { transform: rotateY(324deg) translateZ(600px); backface-visibility: visible; } </style> </head> <body> <div class="show"> <div class="box"> <img src="./../../正面.jpg" > <img src="./../../反面.jpg" > <img src="./../../xuanjiezhimou.jpg" > <img src="./../../码上说故事_690.jpeg" > <img src="./../../1.jpg" > <img src="./../../正面.jpg" > <img src="./../../反面.jpg" > <img src="./../../xuanjiezhimou.jpg" > <img src="./../../码上说故事_690.jpeg" > <img src="./../../1.jpg" > </div> </div> </body> </html>
————————————————
版权声明：本文为CSDN博主「一殿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41866776/article/details/96695938