Aug. 23rd,2021
プロパティについて
概要
“transform”プロパティは要素の形状を変形させるプロパティです。
“transform”プロパティで変形を適用するとCSSだけで要素が描画されるの形状に拡大や縮小、回転、シアー変換などの線型変換や平行移動を適用することができます。
“transform”プロパティによる変形はその周囲にある他の要素のレイアウトには影響を与えません。ただし、スクロール可能オーバーフロー・エリアは拡張するため、“overflow”プロパティの値が“scroll”もしくは“auto”である場合には変形によって要素がはみ出した場合にはスクロールバーが表示されます。
値が“none”でない場合、新たな重ね合わせコンテキストが生成されます。要素は親要素の中に“z-index: 0;”である場合と同じ順序で重ねられて描画されます。また、“z-index: auto;”は“z-index: 0;”として扱われます。
値が“none”でない場合、新たな包含ブロックが生成され、要素のパディング・ボックスは配置位置が指定される子孫要素(“position: absolute;”や“position: fixed;”)の配置位置の基準となります。
サンプルコード
img { transform: sepia(100%);}
値
| 値 | 説明 |
|---|---|
| “<transform-function-list>”値 | |
| <transform-function> | “translate()”関数や“scale()”関数、“rotate()”関数などで変形を指定する |
| 他の値 | |
| none | 変形を適用しない |
| 共通キーワード | |
“<transform-function>”値はホワイトスペースで区切ることで複数の変形を合成する変形関数リスト(“<transform-value-list>”値)として指定することができます。
“none”キーワードは単独で使用します。
使用例
要素を三次元変形する
.transform-rotate3d {
transform: rotate3d(1,1,1,60deg);
}
.transform-rotate3d:hover {
transform: none;
}
.sample-outer-box {
transform-style: preserve-3d;
perspective: 800px;
}
<div class="sample-outer-box">
<p class="transform-rotate3d">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>
</div>
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
複数の変形を適用する
.transform-scalex-skewx-rotate {
transform: scaleX(0.5) skewX(60deg) rotate(170deg);
}
.transform-scalex-skewx-rotate:hover {
transform: none;
}
<p class="transform-scalex-skewx-rotate">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
