このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

transform”プロパティ:変形CSS3で追加

記事Aug. 23rd,2021
要素の形状を変形させるプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 transform: none;
適用対象 変形可能要素
継承 No
パーセント値 参照ボックスの寸法に依存
計算値 指定した値
アニメーション “変形の補間”を参照

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”キーワードは単独で使用します。

仕様書

定義されている仕様書
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
transform
定義あり

定義あり

使用例

要素を二次元変形する

.transform-skewx {
transform: skewX(30deg);
}

.transform-skewx:hover {
transform: none;
}
<p class="transform-skewx">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

要素を三次元変形する

.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>

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

変形を適用しない

.transform-none {
transform: none;
}
<p class="transform-none">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク