一个立体相册
使用變換效果及動畫制作一個立體相冊
<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 800px;}@keyframes myAnimation {from {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to {transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}.container>img {width: 200px;height: 200px;position: absolute;}.container {/* transform: rotate3d(1,1,1,45deg); */position: relative;width: 200px;height: 200px;margin: 300px auto;border: 1px solid red;transform-style: preserve-3d;animation: myAnimation 10s infinite linear;}.container>img:first-child {/* transform: translateZ(200px); */}.container:hover>img:nth-child(2) {transform: translateX(-100px)rotateY(90deg);}.container>img:nth-child(2) {left: -200px;transform-origin: right;transform: rotateY(90deg);}.container:hover>img:nth-child(3) {transform: translateX(100px) rotateY(-90deg);}.container>img:nth-child(3) {right: -200px;transform-origin: left;transform: rotateY(-90deg);}.container:hover>img:nth-child(4) {transform: translateY(-100px) rotateX(-90deg);}.container>img:nth-child(4) {top: -200px;transform-origin: bottom;transform: rotateX(-90deg);}.container:hover>img:nth-child(5) {transform: translateY(100px) rotateX(90deg);}.container>img:nth-child(5) {bottom: -200px;transform-origin: top;transform: rotateX(90deg);}.container:hover>img:last-child {transform: translateZ(300px);}.container:hover>img:first-child {transform: translateZ(-100px);}.container>img:last-child {transform: translateZ(200px);}</style></head><body><div class="container"><img src="images/1.png" alt=""><img src="images/3.png" alt=""><img src="images/9.png" alt=""><img src="images/6.png" alt=""><img src="images/4.png" alt=""><img src="images/李白.png" alt=""></div></body> </html>
將鼠標放上去后
總結
- 上一篇： 电脑的硬件性能怎么看
- 下一篇： 【专栏必读】王道考研408计算机网络+湖