<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>立体相册</title> <style> @keyframes myAnimation{ from{ transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{ transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } body{ } .container>img{ height:300px; width:300px; position:absolute;/*绝对定位*/ transition:3s; } .container{ position: relative;/*相对*/ margin:300px; transform-style:preserve-3d;/*变换风格:3d*/ transition:2s; animation-name:myAnimation; animation-duration:4s; animation-delay:0s; animation-timing-function:linear; animation-iteration-count:infinite; } .container:hover>img:first-child{ left:-400px; } .container:hover>img:nth-child(2){ top:-400px; } .container:hover>img:nth-child(3){ left:400px; } .container:hover>img:nth-child(4){ top:400px; } .container:hover>img:nth-child(5){ transform:translateZ(-100px); } .container:hover>img:nth-child(6){ transform:translateZ(400px); } .container>img:first-child{ left:-300px; transform-origin:right; transform:rotateY(90deg); } .container>img:nth-child(2){ top:-300px; transform-origin:bottom; transform:rotateX(-90deg); } .container>img:nth-child(3){ left:300px; transform-origin:left; transform:rotateY(-90deg); } .container>img:nth-child(4){ top:300px; transform-origin:top; transform:rotateX(90deg); } .container>img:nth-child(6){ transform:translateZ(300px); } </style> </head> <body> <div class="container"> <img src="https://pic3.zhimg.com/v2-51d6270303e685ebb5b8fac2d7bdd43e_r.jpg" alt="6" /> <img src="https://ts1.cn.mm.bing.net/th/id/R-C.3bad09c7318ed26cb9f49516ebb36c03?rik=qvxyyZZ7TfDHOg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1206%2f18%2fc3%2f12048831_1340013801131.jpg&ehk=DZlUCdaYnCVQqXyg%2b6TjFX1mMUf1%2bm8bWYgzwyxd8Zs%3d&risl=&pid=ImgRaw&r=0" /> <img src="https://ts1.cn.mm.bing.net/th/id/R-C.abd4829c9387ec1bfd1a276a5c1da122?rik=dl55Voqxy4wINQ&riu=http%3a%2f%2fi1.073img.com%2f140306%2f4343693_144142_1.jpg&ehk=qvhMjT0iGQT5DhH8MTkAzJqUpjHJRScTQTT5hj%2forLM%3d&risl=&pid=ImgRaw&r=0" /> <img src="https://img.zcool.cn/community/01e58a5d34518ca8012187f4518a0e.jpg@3000w_1l_2o_100sh.jpg" /> <img src="https://pic2.zhimg.com/v2-887c4f76824e7ff3f9f2a6b6f7bc3b78_r.jpg" /> <img src="https://ts1.cn.mm.bing.net/th/id/R-C.83fa906c406fcf24f5ccb9bb99ca2df1?rik=gsO0BemVJseGvg&riu=http%3a%2f%2fi1.hdslb.com%2fbfs%2farchive%2f324750c6747a5da941b18d1427d42c81759c7dc8.jpg&ehk=hNrXtrMfh%2b8pQDUiiovli%2bHqFCCoFab7a0zJSjAnYWo%3d&risl=&pid=ImgRaw&r=0" /> </div> </body> </html>