私はこれは私がよく私はCSSCSSでテキストローテーションを適用するには？
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 90px;
height: 20px;
background-color: yellow;
/* Rotate div */
transform: rotate(270deg);
}
</style>
</head>
<body>
<div><font color="red"><b>ACTIVE</b></font></div>
</body>
</html>
の下に使用することにより、これまで
を達成したものである
以下
を達成しようとしていますテキストの回転を探して...どうすれば同じことができますか？
ありがとうございます。
transform: rotate(270deg)の値をtransform: rotate(90deg)に変更し、次に回転した要素の基本配置を設定するためにtransform-originプロパティを追加します。
div {
width: 90px;
height: 20px;
background-color: yellow;
/* Rotate div */
transform: rotate(90deg);
transform-origin: left;
}
それは
使用CSS3はそれの後に取得するためのアニメーションを@keyframesテキストの回転のためのスタイルません。このスニペットチェック：
div {
width: 90px;
height: 20px;
background-color: yellow;
/* Rotate div */
transform: rotate(270deg);
position:relative;
top:40px;
}
b{
position:absolute;
transform: rotate(180deg);
-webkit-animation: rotate 3s;
-moz-animation: rotate 3s;
animation: rotate 3s;
}
@-webkit-keyframes rotate {
0% {transform: rotate(360deg);}
100% {transform: rotate(180deg);}
}
@-moz-keyframes rotate {
0% {transform: rotate(360deg);}
100% {transform: rotate(180deg);}
}
@keyframes rotate {
0% {transform: rotate(360deg);}
100% {transform: rotate(180deg);}
}<div><font color="red"><b>ACTIVE</b></font></div>の代わりにあなたのdivを回転し、あなただけ90degで
div {
width: 20px;
height: 110px;
background-color: yellow;
display:block;
color:red;
padding-top:40px;
}
div > b{
transform: rotate(-270deg);
display:block;
}<div><b>ACTIVE</b></div>
を回転させることはできません、あなたの
<b> tagを回転させてみては？ – Li357FYI はHTML5では非推奨です。あなたが90度をすれば、あなたは後の結果を得るでしょう。 –
@priyankasarkar div全体またはテキストだけを回転しますか？どうぞよろしくお願いします。 –