html旋转相册

一、实验题目

做一个旋转的3d相册，当鼠标停留在相册时，相册向四面散开

二、实验代码

body{perspective: 1500px;}@keyframes myAnimation {from{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}.container{margin:200px;position: relative;transform-style: preserve-3d;/* animation:myAnimation 5s linear 0s infinite; */animation-name: myAnimation;animation-duration: 5s;animation-timing-function: linear;animation-delay: 0s;animation-iteration-count: infinite;}.container:hover>img:first-child{left: -300px;}.container:hover>img:nth-child(2){top: -300px;}.container:hover>img:nth-child(3){left: 300px;}.container:hover>img:nth-child(4){top: 300px;}.container:hover>img:nth-child(6){transform: translateZ(300px);}.container:hover>img:nth-child(5){transform: translateZ(-100px);}.container>img{width: 200px;height: 200px;position: absolute;border: 1px solid red;transition: 3s;}.container>img:first-child{left: -200px;transform-origin: right;transform: rotateY(90deg);}.container>img:nth-child(2){top:-200px;transform-origin: bottom;transform:rotateX(-90deg);}.container>img:nth-child(3){left: 200px;transform-origin: left;transform:rotateY(-90deg)}.container>img:nth-child(4){top: 200px;transform-origin: top;transform: rotateX(90deg);}.container>img:nth-child(6){transform: translateZ(200px);}

三、实验效果