gpt4 book ai didi

html - 在 3D 空间中垂直于父 div 旋转子 div

转载 作者:行者123 更新时间:2023-12-04 08:28:33 24 4
gpt4 key购买 nike

html {
font-size: 0.7rem;
}
div div {
top: 5rem;
background-color: #444;
transform-origin: top center;
}

.rotate_x {
animation-name: rotate_x;
}
@keyframes rotate_x {
0% {
transform: rotateX( 0deg );
}
100% {
transform: rotateX( 360deg );
}
}

.rotate_y {
animation-name: rotate_y;
}
@keyframes rotate_y {
0% {
transform: rotateY( 0deg );
}
100% {
transform: rotateY( 180deg );
}
}
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
html, body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
body {
perspective: 5rem;
}
div {
position: relative;
top: -1.5rem;
width: 5rem;
height: 5rem;
background-color: #222;
border-radius: 0.5rem;
}
</style>

<div class='rotate_y'>
<div class='rotate_x'>
</div>
</div>

灰底 div似乎没有垂直于黑色顶部旋转出去 div如预期。相反,底部灰色 div 似乎缩小,直到它具有负值并被反转。所需的结果是底部灰色 div像在铰链上一样向上旋转;在 3D 空间中制作“L”形
在它一直向上并翻转以在另一侧做同样的事情之前。随着父 div 旋转 360 度。
我怎样才能做底部 div创建一个“L”形,因为它与它的父 div 连接?

最佳答案

您需要设置transform-style并使视 Angular 更大一点:

html {
font-size: 0.7rem;
}
div div {
top: 5rem;
background-color: #444;
transform-origin: top center;
}

.rotate_x {
animation-name: rotate_x;
}
@keyframes rotate_x {
0% {
transform: rotateX( 0deg );
}
100% {
transform: rotateX( 360deg );
}
}

.rotate_y {
animation-name: rotate_y;
transform-style:preserve-3d; /* HERE */
}
@keyframes rotate_y {
0% {
transform: rotateY( 0deg );
}
100% {
transform: rotateY( 180deg );
}
}
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
html, body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
body {
perspective: 15rem;
}
div {
position: relative;
top: -1.5rem;
width: 5rem;
height: 5rem;
background-color: #222;
border-radius: 0.5rem;
}
</style>

<div class='rotate_y'>
<div class='rotate_x'>
</div>
</div>

关于html - 在 3D 空间中垂直于父 div 旋转子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65134929/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com