3Dトランスフォームによる遠近法を使った円形の配置

3Dトランスフォームによる遠近法を使った円形の配置を実装する方法をご紹介します。

※ CSSコードにはベンダープレフィックスは付けていません。
※ 奥行の半径の距離は250pxを基準としています。

通常
アニメーション

通常

デモ

コード

HTML

CSS

.stage {
									perspective:1000px;
								}

.circle {
									position:relative;
									height:80px;
									transform:translateZ(-250px);
									transform-style:preserve-3d;
								}

.circle .item {
										display:flex;
										align-items:center;
										justify-content:center;
										position:absolute;
										left:50%;
										width:200px;
										height:100%;
										background-color:rgba(0, 0, 0, 0.7);
										font-size:2.4rem;
										text-align:center;
										color:#fff;
									}

.circle .item:nth-child(1) {
										transform:translateX(-50%) translateZ(250px);
									}

.circle .item:nth-child(2) {
										transform:translateX(-50%) rotateY(calc((360deg / 6) * 1)) translateZ(250px);
									}

.circle .item:nth-child(3) {
										transform:translateX(-50%) rotateY(calc((360deg / 6) * 2)) translateZ(250px);
									}

.circle .item:nth-child(4) {
										transform:translateX(-50%) rotateY(calc((360deg / 6) * 3)) translateZ(250px);
									}

.circle .item:nth-child(5) {
										transform:translateX(-50%) rotateY(calc((360deg / 6) * 4)) translateZ(250px);
									}

.circle .item:nth-child(6) {
										transform:translateX(-50%) rotateY(calc((360deg / 6) * 5)) translateZ(250px);
									}

8行目のtransform:translateZ(-250px);は2行目の遠近感を指定したとき（perspectiveプロパティ）に前面に押し出されるのを防ぐための指定です。
奥行の分だけ後ろに下げます。

13行目から15行目のフレキシブル・レイアウトは, 数字を上下左右中央揃えにするための指定です。

27行目から各アイテムを配置していきます。
rotateY関数で各アイテムの深さに応じた角度を指定します。
コード例ではアイテム数が6個なので、360度を6個で割って出た角度をアイテムごとに足していきます。
（1個目は正面なので0度、2個目は60度、3個目は120度といった感じです。）
translateZ関数で半径（深さの距離）を指定します。
translateX関数は、ステージから中央揃えにするため17行目でleft:50%;を指定したときのアイテム自身の位置をアイテム自身の幅の半分を戻すための指定です。

アニメーション

デモ

コード

※ コードは通常を基準に追加するコードです。

CSS

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