css代码

*{
	padding:0;
	margin: 0;}html{
	background:linear-gradient(#032861 0%,#000000 80%);
	height: 100%;  
	width: 100%;
	overflow: hidden;}/*满天星*/.wall{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;}div#midground{
    background: url("../img/midground.png");
   /* z-index:1;*/ overflow: hidden;
    animation: cc 20s linear infinite;}div#foreground{
    background: url("../img/foreground.png"); overflow: hidden;
    /* z-index:2; */
    animation: cc 10s linear infinite;}@keyframes cc {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 1000% 0;
    }}.wrap{
	height: 200px;
	width: 200px;
	margin: 250px auto;
	position: relative;
	perspective:2000px;
	/*实现3d效果*/
	transform-style:preserve-3d; /*	表示所有子元素在3D空间中呈现。*/
	transform:rotateX(20deg) rotateY(30deg); /*定义转换，只是用 X 轴的值。   定义转换，只是用 Y 轴的值。*/
	transform-origin: 50% 50% 0; /*单独100px也行*/
	animation:move 4s linear infinite;
	/*  linear:每一步的距离和前一步都是相同的，也就是等速
	若不加linear，那会默认速度会加快然后最后一点距离再减速 */}/*大正方形样式*/.wrap .box{
	position: absolute;
	width: 200px;
	 height: 200px;
	 opacity: 0.8;
	transition: 2s;}/* translateZ(z)  定义 3D 转换，只是用 Z 轴的值。*//* scaleY(y)   通过设置 Y 轴的值来定义缩放转换。*/.wrap>img:nth-child(1){transform: rotateY(0deg) translateZ(100px);}.wrap>img:nth-child(2){transform: translateZ(-100px) rotateY(180deg);}.wrap>img:nth-child(3){transform: rotateY(90deg) translateZ(100px);}.wrap>img:nth-child(4){transform: rotateY(-90deg) translateZ(100px);}.wrap>img:nth-child(5){transform: rotateX(90deg) translateZ(100px);}.wrap>img:nth-child(6){transform: rotateX(-90deg) translateZ(100px);}/*小正方形*/.wrap .square {
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
   top:50px;}.wrap>img:nth-child(7){transform: rotateY(0deg) translateZ(50px);}.wrap>img:nth-child(8){transform: translateZ(-50px) rotateY(180deg);}.wrap>img:nth-child(9){transform: rotateY(90deg) translateZ(50px);}.wrap>img:nth-child(10){transform: rotateY(-90deg) translateZ(50px);}.wrap>img:nth-child(11){transform: rotateX(90deg) translateZ(50px);}.wrap>img:nth-child(12){transform: rotateX(-90deg) translateZ(50px);}@-webkit-keyframes move{/* from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);} *//* 上面和下面是一样的 */0%{
  transform: rotateX(0deg) rotateY(0deg);}100%{
  transform: rotateX(360deg) rotateY(360deg);}}/* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */.wrap:hover{cursor:pointer;}.wrap:hover>img:nth-child(1){transform: rotateY(0deg) translateZ(200px);}.wrap:hover>img:nth-child(2){transform: translateZ(-200px) rotateY(180deg);}.wrap:hover>img:nth-child(3){transform: rotateY(90deg) translateZ(200px);}.wrap:hover>img:nth-child(4){transform: rotateY(-90deg) translateZ(200px);}.wrap:hover>img:nth-child(5){transform: rotateX(90deg) translateZ(200px);}.wrap:hover>img:nth-child(6){transform: rotateX(-90deg) translateZ(200px);}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144

html代码，将照片换成对应的url即可

<div id="midground" class="wall"></div> <div id="foreground" class="wall"></div> <div class="wrap">

	<img src="images/a.jpg" alt="" class="box">
	<img src="images/b.jpg" alt="" class="box">
	<img src="images/c.jpg" alt="" class="box">
	<img src="images/d.jpg" alt="" class="box">
	<img src="images/e.jpg" alt="" class="box">
	<img src="images/g.jpg" alt="" class="box"> 
	
	<img src="images/h.jpg" alt="" class="square ">
	<img src="images/i.jpg" alt="" class="square ">
	<img src="images/j.jpg" alt="" class="square ">
	<img src="images/k.jpg" alt="" class="square "> 
	<img src="images/l.jpg" alt="" class="square ">
	<img src="images/f.jpg" alt="" class="square ">
	</div>

作者：诗水人间

链接：https://blog.csdn.net/qq_41813208/article/details/107463182

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。