我有以下字母ABC,如下所示:
<body>
<div id="container">
<div id="shape" class="spin">
<div id="A" class="plane">A</div>
<div id="B" class="plane">B</div>
<div id="C" class="plane">C</div>
</div>
</div>
我想要每个字母绕其x轴旋转吗?
我尝试过(对于字母C):
#C {
-webkit-animation: spinAboutItsCentre 8s linear;
}
@-webkit-keyframes spinAboutItsCentre {
from {
-webkit-transform: rotateX(0);
}
to {
-webkit-transform: rotateX(360deg);
}
}
但是字母C移到了字母A旋转的位置。
有任何想法吗?
京东
最佳答案
它看起来应该像这样,您需要指定您的transform-origin属性;
x-%,y-%和z-px。
注意绕Y轴旋转会产生一些偏移,因为引擎对 Angular 色位置的解释起源于对象的“开始”(侧面),而不是对象的中心。
0%和100%表示您的“from”和“to”子句,这种格式允许您添加任意多的行,以增加在指定时间范围内的移动(即25%旋转90度,50%旋转180度,75%旋转270度,100%旋转360度)。
@-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
@-webkit-keyframes spinY
{
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}
}
尝试这些样式,它们应该可以正常工作。
#Ca
{
position: absolute;
left: 20%;
font-size:72px;
-webkit-animation: spinX 8s infinite;
}
#Cb
{
position: absolute;
left: 20%;
font-size:72px;
-webkit-animation: spinY 8s infinite;
}
<div id="Ca">C</div>
<div id="Cb">C</div>