我试图了解如何使用 css 为 3d 对象设置动画。现在我有一个等距类型的形状，当它悬停时会显示它的内部。但另外我想为这个等距形状设置动画以将 360 度旋转为 3d 形状无限。我一直在为每个盒子摆弄它的变换，但它根本不起作用。
任何人都可以帮助我并提供一些提示或解释我如何实现这一目标？
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cube {
width: 100px;
height: 150px;
position: absolute;
background-color: red;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 50% auto;
}
.outterstack .left {
min-width: 100px;
min-height: 250px;
transform-origin: 0 0;
transform: rotate(90deg) skewX(-30deg) scaleY(0.864);
background-color: grey;
}
.outterstack .right {
min-height: 100px;
min-width: 250px;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(-30deg) scaleY(0.864);
position: relative;
bottom: 250px;
background-color: grey;
}
.outterstack …大家好，我正在尝试制作像手机从顶部掉下来的动画，当它到达底部时它会旋转并倾斜以使其看起来像是它的 3d 形状，但似乎我制作的动画在它到达时一直闪烁100% 在关键帧中，任何人都可以向我展示我如何实现这一目标的技巧、技巧或示例吗？谢谢这里是我的代码希望它有帮助。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script defer src="brands.js"></script>
<script defer src="solid.js"></script>
<script defer src="fontawesome.js"></script>
<style type="text/css">
.phone{
width: 600px;
height: 1080px;
background-color: black;
border-radius: 9%;
margin: 50% auto;
position: relative;
animation: bounce 2s ease-in-out forwards;
}
@keyframes bounce {
0% { transform: translateY(-500px); }
50% { transform: translateY(0); }
70% { transform: translateY(-200px); }
100%{
transform: translateY(-50px) rotate(30deg) skew(5deg,347deg);;
}
}
.inner-phone{
width: 553px;
height: 1039px;
background-color: #f5f7fa;
position: absolute;
left: 9px;
top: 14px;
border-radius: 9%; …