rotateのデモ (ボーダーによる2等辺三角形)
以下の例では、上に赤、左右に青のボーダーを指定しています。
縦長にする場合は上の値を増やし、横長にする場合は左右の値を増やします。
青部分が実際にはtransparentになって三角形になっているものとしましょう。
例を見て分かるように、2等辺三角形をボーダーであらわした場合、変形する角度によってジャギってしまいます。
[transform-origin]指定なし
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: 0 0;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: 100% 100%;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: right top;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
rotateのデモ (ボーダーによる直角三角形)
以下の例では、上に赤、右に青のボーダーを指定しています。
縦長にする場合は上の値を増やし、横長にする場合は右の値を増やします。
青部分が実際にはtransparentになって三角形になっているものとしましょう。
例を見て分かるように、直角三角形をボーダーであらわした場合もまた、変形する角度によってジャギってしまいます。
[transform-origin]指定なし
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: 0 0;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: 100% 100%;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: right top;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
rotateのデモ (▲ [line-height] の指定なし [継承なので1.5のまま])
以下の例では、▲に [scale()] を指定して変形させています。
例を見て分かるように、ボーダーの時よりも綺麗に描画されますが、所詮文字なのでユーザーの文字サイズによって大きさが変わったりしちゃいます。
[transform-origin]指定なし
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: 0 0;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: 100% 100%;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: right top;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
rotateのデモ (▲ [line-height: 1;])
以下の例では、▲に [scale()] を指定して変形させています。
例を見て分かるように、ボーダーの時よりも綺麗に描画されますが、所詮文字なのでユーザーの文字サイズによって大きさが変わったりしちゃいます。
[line-height] 指定なしの例と比較してみると、こんなことをやる場合は [line-height: 1;] にしておいた方がよさげです。
[transform-origin]指定なし
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: 0 0;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: 100% 100%;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[transform-origin: right top;]
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
正円の吹き出しを▲で
正円であれば、[rotate] の値を変更するだけで吹き出しをどこから出すのも簡単です。▲なので文字サイズ変更されると大きさが変わると思いますが。
▲は分かりやすく青系の色にしてあります。
楕円の吹き出しを▲で
positionでちまちまやれば出来るんですけど、なにかしらやりやすい方法がないかなー。いろいろやったのですが、スマートな実装方法を発見できず。
[transform] は [rotate] [scale] の順番で。
[transform] は [rotate] [scale] の指定順序で表示結果が異なります。
[rotate] [scale] の順
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる
[scale] [rotate] の順
- 0deg
- 0度回転させてみる
- 15deg
- 15度回転させてみる
- 30deg
- 30度回転させてみる
- 45deg
- 45度回転させてみる
- 60deg
- 60度回転させてみる
- 75deg
- 75度回転させてみる
- 90deg
- 90度回転させてみる