Web前端最全前端入门篇练习8:3d动画(照片旋转展示),CSS外边距塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 照片旋转展示</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #222;
overflow: hidden;
}
.container {
perspective: 1500px;
}
.box {
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s infinite ease-in-out;
}
.box img {
width: 300px;
height: 300px;
position: absolute;
backface-visibility: hidden;
}
.box img:first-child {
transform: rotateY(0deg) translateZ(300px);
}
.box img:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
.box img:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
.box img:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
.box img:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
.box img:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
@keyframes rotate {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="photo-1.jpg" alt="Photo 1">
<img src="photo-2.jpg" alt="Photo 2">
<img src="photo-3.jpg" alt="Photo 3">
评论已关闭