<!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 in { 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 image conversion * / .box IMG: Child-Nth (. 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" > = "./../../ positive .jpg"srcImg< > <img src="./../../反面.jpg" > <img src="./../../xuanjiezhimou.jpg" > <img src="./../../码上说故事_690.jpeg" > <img src="./../../1.jpg" > </div> </div> </body> </html>
----------------
Disclaimer: This article is CSDN bloggers "a temple" original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source and this link statement.
Original link: https: //blog.csdn.net/qq_41866776/article/details/96695938