カテゴリ:デジタル覚え書き > web関係 »

【CSS】台形のタブ(transform)

ネットをふらふらしていたら、CSSで台形のタブみたいなのの作り方を見かけました。
こんなやつ。
タブ1タブ2タブ3
transformプロパティを使って変形してるんですが、この使い方みたいなものがちょっと分かりづらかったので少し調べました。
  1. とりあえずソース
  2. transformプロパティ
  3. 回転(rotate)
  4. 拡大、縮小(scale)
  5. 移動(translate)
  6. 傾斜(skew)
  7. ユーザーの視点距離(perspective)
  8. どういうことだったか

とりあえずソース

html


タブ1タブ2タブ3

ずらずらっと改行なしで書いたのは、タブとタブの間に想定外のスペースが入ってしまわないようにです。

css


.tabindex {
  width: 50px;
  margin: 10px 0;
  padding: 5px 10px;
  display: inline-block;
  position: relative;
  z-index: 0;
}
.tabindex::before {
  content: "";
  background: #ffcd2a;
  border: solid thin #b25100;
  border-radius: 7px 7px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transform: perspective(1em) scaleY(1.2) rotateX(3deg);
  transform-origin: bottom left;
}

toprightbottomleft全部指定してるのは、before擬似要素の大きさを100%にするためみたいですね。
widthheight100%にするのとの違いはなんだろう……。

transformプロパティ

要素を、回転、拡大縮小、移動、傾斜させることができるプロパティです。
「回転、拡大、縮小」と言えばスーファミ……あ、いえ、なんでもないです。
値はnoneまたは、1つ以上の変形関数です。
回転はrotate、拡大縮小はscale、移動はtranslate、傾斜はskewです。
それからpersepectiveという関数があって、これはユーザーと z=0 平面との間の距離を定義するものと説明されています(perspective() - CSS: カスケーディングスタイルシート | MDN)。
もうひとつmatrixという関数があるんですが、まだ私には難しくてよく分からないのでスルーします……。

変形関数は同時に複数指定することができますが、perspectiveが含まれるときはこれを一番初めに書かないといけないようです。
複数指定した時は左から右に、順番に効果が適用されます。
なので関数や順番によっては、値が同じでも結果が変わることがあります。
なんだかややこしいです。

要素は一旦変形前の形、位置で描画されたあと変形されるので、変形したあとに描画範囲が広くなっても、その分のスペースは確保されないようです。
四角形を回転させると角がはみ出す感じです。

回転(rotate)

回転には、rotate()rotate3d()rotateX()rotateY()rotateZ()があります。
X、Y、Zはそれぞれ、回転させるときの中心軸を表しています。
ただのrotate()rotateZ()の違いがよく分かりません……。
もしかするとtransform-originの値によっては違いが出てくるのかも。
rotate3d()もちょっと難しそうなのでスルーします、すみません。
多分、X、Y、Zを一度に指定できるってことなんだと思います。
実際に値をいじりながら結果を確認できるページがあったのでリンクを貼っておきます。
rotate3d | transform | CSS3 Generator
()(カッコ)の中には、角度を表すangle値(詳しくは→<angle> - CSS: カスケーディングスタイルシート | MDN)が入ります。
45degとか0.25turnとかですね。
原点の初期値は中央です。

回転なし

開店しました

rotate(45deg)

開店しました

rotateX(45deg)

開店しました

rotateY(45deg)

開店しました

rotateZ(45deg)

開店しました

一応rotate3d(1, 1, 1, 45deg)

開店しました

ちなみに、X軸またはY軸で回転を90度にすると、要素の断面を真横から見ているような感じになるので、見えなくなります。

rotateX(90deg)

開店しました

そこを超えると、裏返ります。

rotateX(150deg)

開店しました

拡大、縮小(scale)

拡大、縮小も、回転と同じようにscale()scale3d()scaleX()scaleY()scaleZ()があります。
()(カッコ)の中には、何倍にするかのnumber値(整数、または小数部分のある数値)が入ります。

scale()のカッコの中に入るのは、1つか2つの値です。
1つにすると横と縦、同じ倍率で拡大縮小されます。
2つにするときは値を,(カンマ)で区切ります。
1つ目の値が横方向、2つ目の値が縦方向の伸縮率を表します。

scaleZ()と、scale3d()の3つ目の値は同じ意味だと思うんですが、transform-style: preserve-3dtransform: perspective()を指定しないと結果に現れないみたいです。

移動(translate)

これも、translate()translate3d()translateX()translateY()translateZ()があります。
()(カッコ)の中には、どれだけ移動させるかのlength値が入ります。
length値には、10pxとか15cmなどの絶対的な長さ、20emとか1vwなどの相対的な長さがあります。

translate()のカッコの中に入るのは、1つか2つの値です。
1つにすると横方向縦方向にそれぞれ同じ距離だけ移動します。
2つにすると、1つ目が横方向の、2つ目が縦方向の距離を表します。

これもZ方向で結果を得るにはtransform-style: preserve-3dtransform: perspective()を設定しないと見た目は変わらないです。

(緑の要素を手前に移動させて、親要素をY軸方向に回転させてあります)

異動しました。
異動しました。

transform-styleは実験段階の機能です。
適用されないブラウザがあるかもしれませんし、今後動作が変更になるかもしれません。

傾斜(skew)

傾斜は、skew()skewX()skewY()があります。
skew()は1つまたは2つの値をとって、値が1つのときはskewX()と同じ意味になります。
2つのときは1つ目の値を0にすると、skewY()と同じ意味になります。
この変換は、水平方向にある角度より要素内の各点を歪ませる、せん断写像(transvection) です。各点の横座標は、指定された角度と原点までの距離に比例する値によって変更されます。 したがって、原点から遠いほど値が大きくなります。
MDNにはこう書いてありますが、はっきり言ってイミフです。
原点から遠いほど値が大きく……ってなんのことでしょう。
原点はtransform-originプロパティで決められます。
試しに書いてみます。

skew(-15deg, -15deg)
原点が要素の左下

鶏舎です。

skewX()のとき、原点のX座標は関係なくて、skewY()のとき、原点のY座標は関係ないみたいです。
要素の各頂点が原点から正の位置にあるか負の位置にあるかで、移動する方向が変わるようです。
当たり前のことなのかもしれませんが、私にはよく分かりません……。
Illustratorで色々試して分かったのは、こんな感じのこと。
transform:skewX()の原点による変化の説明
2つの平行四辺形の右辺と左辺が合うように配置した時、右の平行四辺形の左辺をX座標が0になるまで伸ばしてみたら、Y座標が408pxになりました。
なので、position: absolutetopleftを同じにして重なるようにした要素の片方のtransform-originbottom(150px)から408pxにすると、右辺と左辺がぴったり合いました。

transform:skewX(-30deg)

鶏舎です。
鶏舎です。

分かったような分からないような……。

ユーザーの視点距離(perspective)

ユーザーとz=0 平面との間の距離を決める関数です。
()(カッコ)の中にはtranslateと同じ、length値が入ります。
perspectiveって視点っていう意味なんですね。
視点距離が移動することによって、絵とか写真でいうパースが変わるってことだと思います。

回転のところで、X軸やY軸を中心にしたとき、単に上下または左右につぶれて見えたのは、perspective()noneだったからです。
自分から見て奥に傾いた四角形をSketchUp(3Dモデリングソフト)で見ると……
まず、遠近法を使わない場合がこれ。 パースなしの傾いた長方形
遠近法をオンにするとこうなります。
パースありの傾いた長方形
ズームを変えてるのは、perspective()の値が変化した時の違いを表現できるかなと思ったので(できてなかった)。

対象物から視点を離すほどパースは緩やかになります(言い方合ってる?)。
こういう具合です。
近づくとパースがきつくなる

さらに、transform-originで原点を変えると、見た目の傾き方も変わります。
最初に書いた台形タブの原点は左下なので、こういうことです。
パースをつけるときの視点

ところで、transformプロパティの中の関数とは別に、rotatescaletranslateperspectiveperspective-originというプロパティがあるんです。
これは多分比較的新しいプロパティ、または実験段階の機能らしいですが、今後どっちかに統一されるんでしょうか。

どういうことだったか

あの台形の作り方を理解するのにこんなに色々調べなくちゃいけませんでした……。

台形の形は、contentを空文字にしたbefore擬似要素を変形させて作ったものです。
transform-originを左下に設定して、perspective()で視点を少しだけ離れたところに置いて、rotateX()でちょっと向こうに傾けて、傾けたことによって見た目が縮んだ分、scaleY()で縦に伸ばした……
ということでした。

長かったですね……すみません……。
自分である程度「落とせた」と思えるまでやってしまいました(いつもそう)。



ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

コメントの投稿

非公開コメント

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
10 | 2019/11 | 12
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
リンク
カウンター
RSSリンクの表示
QRコード
QR