ここは私の@keyframesです。私は単語のアニメーションを作ってみたい、例えば、 "こんにちは"という言葉は地球と360度を囲むでしょう。しかし、それは地球上で円滑に-360度移動します。その言葉は逆さまにならない。私の@keyframesは間違っていますが、私はそれを修正する方法がわかりません。CSS3単語回転アニメーション翻訳
@keyframes move {
from {
transform: translate(-100px);
rotateY(0deg)
transform-origin: 100px;
}
to {
transform: translate(-200px);
rotateY(-360deg)
transform-origin: 150px;
}
}
あなただけの最初のテキスト親perspectiveとtransform-style: preserve-3dに与える、それを達成するために、より小さなものが必要。テキストの場合はtranslateXの代わりにtranslateZを使用してください。
https://jsfiddle.net/9qhg1tvr/
body {
width: 100px;
height: 100px;
perspective: 1000px;
transform-style: preserve-3d;
padding-left: 200px
}
img {
position: absolute;
}
p {
width: 100px;height:100px;
font-size: 80px;
text-transform: uppercase;
transform: rotateY(40deg);
animation: rotate 4s linear forwards infinite;
transform-origin: right center
}
@keyframes rotate {
0% { transform: rotateY(0deg) translateZ(0px); }
50% { transform: rotateY(180deg) translateZ(400px); }
100% { transform: rotateY(360deg) translateZ(0px); }
}<body>
<img src="http://www.pngall.com/wp-content/uploads/2016/06/Earth-PNG-Clipart.png" alt="earth">
<p>
hello
</p>
</body>それは私が欲しいものです。しかし、私は水平にしてしばらく動かして回転させたいのか尋ねたい。それを作る方法？ – soul299
次に、25％のようなフレームを作成し、 'translateX'を使ってその回転をhttps://jsfiddle.net/9qhg1tvr/1/にリセットします。 –
2Dアニメーションを目指している場合、これはすばやく汚れた解決策です。
@import 'https://necolas.github.io/normalize.css/latest/normalize.css';
html{ padding:10px; text-align:center; text-transform:uppercase }
span{ display:inline-block; transform:translateY(50px) }
#ch1{ transform:rotateZ(-45deg); transform-origin:100% 200% }
#ch2{ transform:rotateZ(-30deg); transform-origin:0% 100% }
#ch3{ transform:translateX(5px) translateY(-3px) }
#ch4{ transform:rotateZ(45deg); transform-origin:130% 170% }
#ch5{ transform:rotateZ(33deg); transform-origin:-70% 330% }
#earth{
width:100px; height:100px; background:deepskyblue;
border-radius:100%; line-height:100px; margin:0 auto;
transform:translateY(70px)
}
#curve{
animation-name:orbit; animation-duration:3s;
animation-iteration-count:infinite;
transform-origin:50% 500%;
}
@keyframes orbit{
0%{ transform:translateY(50px) rotateZ(0) }
100%{ transform:translateY(50px) rotateZ(360deg) }
}<span id="curve">
<span id="ch1">h</span>
<span id="ch2">e</span>
<span id="ch3">l</span>
<span id="ch4">l</span>
<span id="ch5">o</span>
</span>
<div id="earth">earth</div>
あなたは作業スニペットをしてください作成することはできますか？ –
ところで、あなたのCSSは無効です。 'translate'プロパティの後に'; 'を削除してください。 –