为什么CSS 3D动画会出现这种效果
<style>*{box-sizing:border-box;}body{margin:0;height:100%;background:url(background.j...
<style> *{ box-sizing: border-box; } body{ margin: 0; height: 100%; background: url(background.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; } main{ width: 300px; height: 300px; background: red; position: relative; perspective: 500px; transform-style: preserve-3d; animation: 10s rotate linear infinite; } main div{ position: absolute; width: 100%; height: 100%; box-shadow: 0px 0px 10px #5AC7F9; } .font{ background: url(1.jpg); transform: translateZ(150px); } .back{ background: url(2.jpg); transform: rotateY(180deg) translateZ(150px); } .left{ background: url(3.jpg); transform: rotateY(-90deg) translateZ(150px); } .right{ background: url(4.jpg); transform: rotateY(90deg) translateZ(150px); } .top{ background: url(5.jpg); transform: rotateX(90deg) translateZ(150px); } .bottom{ background: url(6.jpg); transform: rotateX(-90deg) translateZ(150px); } @keyframes rotate{ 0%{transform: rotateX(0deg)rotateY(0deg)} 100%{transform: rotateX(360deg)rotateY(360deg)} } </style> </head> <body> <main> <div class="font"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </main> </body>
展开
1个回答
展开全部
main{
width: 300px;
height: 300px;
background: red;
position: relative;
perspective: 500px;//你把这个去掉试试
transform-style: preserve-3d;
animation: 10s rotate linear infinite;
}
width: 300px;
height: 300px;
background: red;
position: relative;
perspective: 500px;//你把这个去掉试试
transform-style: preserve-3d;
animation: 10s rotate linear infinite;
}
更多追问追答
追问
还是会出现梯形，不会像之前那么明显
追答
可能是你的错觉，我去掉之后就挺好的
你在main里面把动画去掉，然后加上
transform: rotateX(339deg)rotateY(329deg);
自己测试下最好是在浏览器里面，把你去掉之后的图片截图给我看看。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
