perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
注意的是 这个属性 和 transform: translateZ(20em), 结合的使用的时候效果更加不错。
试着做了一个跳动的效果，看着还错，呵呵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视觉</title>
<style>
body {
font-size: 2em;
}
.box {
width: 3em;
height: 3em;
margin: 0 auto;
transform-style: preserve-3d;
perspective: 300px;
perspective-origin: 50% 50%;
}
.box_cont {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #999;
transform: translateZ(20em);
animation: show 2s forwards;
}
@keyframes show {
0% {
transform: translateZ(20em);
}
15% {
transform: translateZ(15em);
}
30% {
transform: translateZ(10em);
}
45% {
transform: translateZ(5em);
}
60% {
transform: translateZ(1em);
}
75% {
transform: translateZ(5em);
}
100% {
transform: translateZ(1em);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box_cont">
</div>
</div>
</body>
</html>
时间： 2024-11-10 12:29:16