トランスフォームの描画方法

トランスフォームの描画方法について

トランスフォームの描画方法を調整するには、transform-styleプロパティを使用します。

※ IEは対応していません。

構文

							transform-style:描画方法;

指定可能な値

値	説明	初期値
flat	2D平面上に描画	○
preserve-3d	3D空間上に描画	-

サンプル

flat

preserve-3d

HTML

CSS

div.sample {
									display:inline-block;
									position:relative;
									margin:1em 0;
									width:100px;
									height:100px;
									-webkit-transform:rotateX(-10deg) rotateY(-45deg);
									-moz-transform:rotateX(-10deg) rotateY(-45deg);
									transform:rotateX(-10deg) rotateY(-45deg);
									-webkit-transform-style:preserve-3d;
									-moz-transform-style:preserve-3d;
									transform-style:preserve-3d;
								}

div.sample p {
										display:flex;
										flex-direction:row;
										align-items:center;
										justify-content:center;
										position:absolute;
										left:0;
										right:0;
										box-sizing:border-box;
										margin:0;
										border:1px solid #333;
										width:100px;
										height:100px;
										background-color:rgba(0, 0, 0, 0.5);
										color:#fff;
										text-align:center;
									}

div.sample p:nth-child(1) {
										-webkit-transform:translate3d(0, 0, 50px);
										-moz-transform:translate3d(0, 0, 50px);
										transform:translate3d(0, 0, 50px);
									}

div.sample p:nth-child(2) {
										-webkit-transform:translate3d(-50px, 0, 0) rotateY(-90deg);
										-moz-transform:translate3d(-50px, 0, 0) rotateY(-90deg);
										transform:translate3d(-50px, 0, 0) rotateY(-90deg);
									}

div.sample p:nth-child(3) {
										-webkit-transform:translate3d(0, -50px, 0) rotateX(-90deg);
										-moz-transform:translate3d(0, -50px, 0) rotateX(-90deg);
										transform:translate3d(0, -50px, 0) rotateX(-90deg);
									}

div.sample p:nth-child(4) {
										-webkit-transform:translate3d(0, 50px, 0) rotateX(90deg);
										-moz-transform:translate3d(0, 50px, 0) rotateX(90deg);
										transform:translate3d(0, 50px, 0) rotateX(90deg);
									}

div.sample p:nth-child(5) {
										-webkit-transform:translate3d(50px, 0, 0) rotateY(90deg);
										-moz-transform:translate3d(50px, 0, 0) rotateY(90deg);
										transform:translate3d(50px, 0, 0) rotateY(90deg);
									}

div.sample p:nth-child(6) {
										-webkit-transform:translate3d(0, 0, -50px);
										-moz-transform:translate3d(0, 0, -50px);
										transform:translate3d(0, 0, -50px);
									}

CSS3逆引きリファレンス一覧へ戻る