如何使css线从边界不消失，而旋转动画?

Question

我想创建一个像蛋壳边缘从左到右移动的曲线动画。这是我已经做过的。

.box {
width: 25px; 
height: 100px;  
border: solid 3px #000;
border-color: transparent transparent transparent #000;
border-radius: 50%/50px 0 0 50px;
animation: animation 4s infinite;
}
@keyframes animation {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}

和一个简单的div标签

<div class="box"></div>

问题是边框的宽度在旋转时发生变化，并且在旋转90/270度时完全消失。我怎样才能解决这个问题呢?

jsfiddle

Answer 1

我想你需要这样的东西。

.cube {
position: relative;
margin: 30vh 50vw;
transform-style: preserve-3d;
animation: animation 4s infinite;
}
@keyframes animation {
0% {
transform: rotateY(0deg)
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}

.face {
position: absolute;
background: #000;
}

.front {
transform: translateZ(12.5px);
width: 25px;
height: 200px;
background: red;
}

.back {
transform: rotateY(180deg) translateZ(12.5px);
width: 25px;
height: 200px;
background: orange;
}

.right {
transform: rotateY(90deg) translateZ(12.5px);
width: 25px;
height: 200px;
background:lime;
}

.left {
transform: rotateY(-90deg) translateZ(12.5px);
width: 25px;
height: 200px;
background:blueviolet;
}

.top {
transform: rotateX(90deg) translateZ(100px);
width: 25px;
height: 200px;
}

.bottom {
transform: rotateX(-90deg) translateZ(100px);
width: 25px;
height: 200px;
}

<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>

Answer 2

要制作HTML+CSS曲线动画，你没有现成的、简单的解决方案。

我的建议是使用canvas和javascript编程对象的运动。

然而，我用一些类似于从一边到另一边的平滑运动的元素来剪辑。

main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card {
position: relative;
width: 350px;
aspect-ratio: 1;
border-radius: 10px;
overflow: hidden;
background: white;
}
span {
box-sizing: border-box;
display: inline-block;
position: absolute;
width: 50%;
height: 100%;
backface-visibility: hidden;
}
span.left-border {
left: 0;
border-radius: 100vw 0 0 100vw;
transform-origin: right;
background-color: black;
animation: elastic-left linear 6s infinite;
}
span.left-cover {
left: 2%;
top: 2%;
height: 96%;
border-radius: 100vw 0 0 100vw;
transform-origin: right;
background-color: white;
animation: elastic-left linear 6s infinite;
}
span.middle{
width: 2%;
left: 49%;
background-color: black;
}
span.right-cover {
left: 48%;
top: 2%;
background-color: white;
border-radius: 0 100vw 100vw 0;
height: 96%;
transform-origin: left;
animation: elastic-right linear 6s infinite;
}
span.right-border {
left: 50%;
border-radius: 0 100vw 100vw 0;
transform-origin: left;
background-color: black;
animation: elastic-right linear 6s infinite;
}
@keyframes elastic-left {
0% {
transform: rotateY(180deg);
}
50% {
transform: rotateY(0);
}
100% {
transform: rotateY(180deg);
}
}
@keyframes elastic-right {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0);
}
}

<main>
<div class="card">
<span class="middle"></span>
<span class="left-border"></span>
<span class="left-cover"></span>
<span class="right-border"></span>
<span class="right-cover"></span>
</div>
</main>

代码可以被改进，所以感谢所有有价值的反馈。

Answer 3

我认为你现在有一个很好的代码库，你可以安排你想要的

.cube {
position: relative;
margin: 30vh 50vw;
transform-style: preserve-3d;
animation: animation 10s infinite;
}

@keyframes animation {
0% {
transform: rotateY(0deg)
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}

.face {
position: absolute;
/* background: #000; */
}

.front {
transform: translateZ(0px);
width: 100px;
height: 200px;
/* background: red; */
border-radius:50%;
border-left:10px solid red;
}
.a{
transform: translateZ(0px);
border-left:5px solid red;
}
.b{
transform: translateZ(1px);
border-left:5px solid red;
}
.c{
transform: translateZ(2px);
border-left:5px solid red;
}
.d{
transform: translateZ(3px);
border-left:5px solid red;
}
.e{
transform: translateZ(4px);
border-left:5px solid red;
}
.f{
transform: translateZ(5px);
border-left:5px solid red;
}
.h{
transform: translateZ(6px);
border-left:5px solid red;
}

<div class="cube">
<div class="face front"></div>
<div class="face front a"></div>
<div class="face front b"></div>
<div class="face front c"></div>
<div class="face front d"></div>
<div class="face front e"></div>
<div class="face front f"></div>
<div class="face front g"></div>
<div class="face front h"></div>
</div>