[{"data":1,"prerenderedAt":1017},["ShallowReactive",2],{"article-hypercube-art":3},{"id":4,"title":5,"body":6,"date":1009,"description":1010,"extension":1011,"meta":1012,"navigation":91,"path":1013,"seo":1014,"stem":1015,"__hash__":1016},"articles\u002Farticles\u002Fhypercube-art.md","CSS 3D Transform で描くハイパーキューブ",{"type":7,"value":8,"toc":997},"minimark",[9,13,17,20,23,27,30,125,134,136,140,151,361,379,381,385,395,604,606,610,617,622,703,706,710,791,794,798,898,901,903,906,977,993],[10,11,12],"h2",{"id":12},"作品",[14,15,16],"p",{},"3つの立方体（外・中・内）が、それぞれ異なる回転軸と速度で動き続けます。\n画像もライブラリも使わず、純粋な CSS だけで奥行きを持つ 3D 空間を作っています。",[18,19],"hyper-cube",{},[21,22],"hr",{},[10,24,26],{"id":25},"css-3d-の基本構造","CSS 3D の基本構造",[14,28,29],{},"CSS 3D は「カメラ（perspective）」と「3D 空間（preserve-3d）」の2つの設定で成立します。",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes github-light github-dark","\u002F* カメラの焦点距離。小さいほど歪みが強くなる *\u002F\n.scene {\n  perspective: 700px;\n}\n\n\u002F* 子要素の transform を 3D 空間に展開する *\u002F\n.cube {\n  transform-style: preserve-3d;\n}\n","css","",[38,39,40,49,60,80,86,93,99,107,120],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sJ8bj","\u002F* カメラの焦点距離。小さいほど歪みが強くなる *\u002F\n",[41,50,52,56],{"class":43,"line":51},2,[41,53,55],{"class":54},"sScJk",".scene",[41,57,59],{"class":58},"sVt8B"," {\n",[41,61,63,67,70,73,77],{"class":43,"line":62},3,[41,64,66],{"class":65},"sj4cs","  perspective",[41,68,69],{"class":58},": ",[41,71,72],{"class":65},"700",[41,74,76],{"class":75},"szBVR","px",[41,78,79],{"class":58},";\n",[41,81,83],{"class":43,"line":82},4,[41,84,85],{"class":58},"}\n",[41,87,89],{"class":43,"line":88},5,[41,90,92],{"emptyLinePlaceholder":91},true,"\n",[41,94,96],{"class":43,"line":95},6,[41,97,98],{"class":47},"\u002F* 子要素の transform を 3D 空間に展開する *\u002F\n",[41,100,102,105],{"class":43,"line":101},7,[41,103,104],{"class":54},".cube",[41,106,59],{"class":58},[41,108,110,113,115,118],{"class":43,"line":109},8,[41,111,112],{"class":65},"  transform-style",[41,114,69],{"class":58},[41,116,117],{"class":65},"preserve-3d",[41,119,79],{"class":58},[41,121,123],{"class":43,"line":122},9,[41,124,85],{"class":58},[14,126,127,130,131,133],{},[38,128,129],{},"perspective"," は 1 つ上の祖先要素に設定し、",[38,132,117],{}," は 3D 変換する要素自身に設定します。\nこの 2 つがセットになって初めて立体に見えます。",[21,135],{},[10,137,139],{"id":138},"_6面の配置","6面の配置",[14,141,142,143,146,147,150],{},"立方体の 1 辺を ",[38,144,145],{},"S"," とすると、各面は ",[38,148,149],{},"translateZ(S\u002F2)"," だけ手前に押し出してから回転させます。",[31,152,154],{"className":33,"code":153,"language":35,"meta":36,"style":36},".front  { transform: rotateY(0deg)   translateZ(80px); }\n.back   { transform: rotateY(180deg) translateZ(80px); }\n.right  { transform: rotateY(90deg)  translateZ(80px); }\n.left   { transform: rotateY(-90deg) translateZ(80px); }\n.top    { transform: rotateX(90deg)  translateZ(80px); }\n.bottom { transform: rotateX(-90deg) translateZ(80px); }\n",[38,155,156,197,231,264,296,329],{"__ignoreMap":36},[41,157,158,161,164,167,169,172,175,178,181,184,187,189,192,194],{"class":43,"line":44},[41,159,160],{"class":54},".front",[41,162,163],{"class":58},"  { ",[41,165,166],{"class":65},"transform",[41,168,69],{"class":58},[41,170,171],{"class":65},"rotateY",[41,173,174],{"class":58},"(",[41,176,177],{"class":65},"0",[41,179,180],{"class":75},"deg",[41,182,183],{"class":58},")   ",[41,185,186],{"class":65},"translateZ",[41,188,174],{"class":58},[41,190,191],{"class":65},"80",[41,193,76],{"class":75},[41,195,196],{"class":58},"); }\n",[41,198,199,202,205,207,209,211,213,216,218,221,223,225,227,229],{"class":43,"line":51},[41,200,201],{"class":54},".back",[41,203,204],{"class":58},"   { ",[41,206,166],{"class":65},[41,208,69],{"class":58},[41,210,171],{"class":65},[41,212,174],{"class":58},[41,214,215],{"class":65},"180",[41,217,180],{"class":75},[41,219,220],{"class":58},") ",[41,222,186],{"class":65},[41,224,174],{"class":58},[41,226,191],{"class":65},[41,228,76],{"class":75},[41,230,196],{"class":58},[41,232,233,236,238,240,242,244,246,249,251,254,256,258,260,262],{"class":43,"line":62},[41,234,235],{"class":54},".right",[41,237,163],{"class":58},[41,239,166],{"class":65},[41,241,69],{"class":58},[41,243,171],{"class":65},[41,245,174],{"class":58},[41,247,248],{"class":65},"90",[41,250,180],{"class":75},[41,252,253],{"class":58},")  ",[41,255,186],{"class":65},[41,257,174],{"class":58},[41,259,191],{"class":65},[41,261,76],{"class":75},[41,263,196],{"class":58},[41,265,266,269,271,273,275,277,279,282,284,286,288,290,292,294],{"class":43,"line":82},[41,267,268],{"class":54},".left",[41,270,204],{"class":58},[41,272,166],{"class":65},[41,274,69],{"class":58},[41,276,171],{"class":65},[41,278,174],{"class":58},[41,280,281],{"class":65},"-90",[41,283,180],{"class":75},[41,285,220],{"class":58},[41,287,186],{"class":65},[41,289,174],{"class":58},[41,291,191],{"class":65},[41,293,76],{"class":75},[41,295,196],{"class":58},[41,297,298,301,304,306,308,311,313,315,317,319,321,323,325,327],{"class":43,"line":88},[41,299,300],{"class":54},".top",[41,302,303],{"class":58},"    { ",[41,305,166],{"class":65},[41,307,69],{"class":58},[41,309,310],{"class":65},"rotateX",[41,312,174],{"class":58},[41,314,248],{"class":65},[41,316,180],{"class":75},[41,318,253],{"class":58},[41,320,186],{"class":65},[41,322,174],{"class":58},[41,324,191],{"class":65},[41,326,76],{"class":75},[41,328,196],{"class":58},[41,330,331,334,337,339,341,343,345,347,349,351,353,355,357,359],{"class":43,"line":95},[41,332,333],{"class":54},".bottom",[41,335,336],{"class":58}," { ",[41,338,166],{"class":65},[41,340,69],{"class":58},[41,342,310],{"class":65},[41,344,174],{"class":58},[41,346,281],{"class":65},[41,348,180],{"class":75},[41,350,220],{"class":58},[41,352,186],{"class":65},[41,354,174],{"class":58},[41,356,191],{"class":65},[41,358,76],{"class":75},[41,360,196],{"class":58},[362,363,365],"callout",{"type":364},"tip",[14,366,367,369,370,374,375,378],{},[38,368,166],{}," は ",[371,372,373],"strong",{},"右から左に適用","されます。",[38,376,377],{},"rotateY(90deg) translateZ(80px)"," は「まず Z 方向に 80px 移動し、その後 Y 軸で 90° 回転する」という意味になります。",[21,380],{},[10,382,384],{"id":383},"css-カスタムプロパティで3サイズを共通化","CSS カスタムプロパティで3サイズを共通化",[14,386,387,388,390,391,394],{},"外・中・内で辺の長さが異なるため、面ごとの ",[38,389,186],{}," が変わります。\nCSS カスタムプロパティ（",[38,392,393],{},"--half","）を親要素に定義することで、子要素がそれを参照できます。",[31,396,398],{"className":33,"code":397,"language":35,"meta":36,"style":36},".outer { --half: 80px; width: 160px; height: 160px; }\n.mid   { --half: 48px; width:  96px; height:  96px; }\n.inner { --half: 20px; width:  40px; height:  40px; }\n\n\u002F* 3サイズ共通の face スタイル *\u002F\n.face.front { transform: rotateY(0deg)  translateZ(var(--half)); }\n.face.back  { transform: rotateY(180deg) translateZ(var(--half)); }\n\u002F* ...以下同様 *\u002F\n",[38,399,400,443,483,522,526,531,566,599],{"__ignoreMap":36},[41,401,402,405,407,410,412,414,416,419,422,424,427,429,431,434,436,438,440],{"class":43,"line":44},[41,403,404],{"class":54},".outer",[41,406,336],{"class":58},[41,408,393],{"class":409},"s4XuR",[41,411,69],{"class":58},[41,413,191],{"class":65},[41,415,76],{"class":75},[41,417,418],{"class":58},"; ",[41,420,421],{"class":65},"width",[41,423,69],{"class":58},[41,425,426],{"class":65},"160",[41,428,76],{"class":75},[41,430,418],{"class":58},[41,432,433],{"class":65},"height",[41,435,69],{"class":58},[41,437,426],{"class":65},[41,439,76],{"class":75},[41,441,442],{"class":58},"; }\n",[41,444,445,448,450,452,454,457,459,461,463,466,469,471,473,475,477,479,481],{"class":43,"line":51},[41,446,447],{"class":54},".mid",[41,449,204],{"class":58},[41,451,393],{"class":409},[41,453,69],{"class":58},[41,455,456],{"class":65},"48",[41,458,76],{"class":75},[41,460,418],{"class":58},[41,462,421],{"class":65},[41,464,465],{"class":58},":  ",[41,467,468],{"class":65},"96",[41,470,76],{"class":75},[41,472,418],{"class":58},[41,474,433],{"class":65},[41,476,465],{"class":58},[41,478,468],{"class":65},[41,480,76],{"class":75},[41,482,442],{"class":58},[41,484,485,488,490,492,494,497,499,501,503,505,508,510,512,514,516,518,520],{"class":43,"line":62},[41,486,487],{"class":54},".inner",[41,489,336],{"class":58},[41,491,393],{"class":409},[41,493,69],{"class":58},[41,495,496],{"class":65},"20",[41,498,76],{"class":75},[41,500,418],{"class":58},[41,502,421],{"class":65},[41,504,465],{"class":58},[41,506,507],{"class":65},"40",[41,509,76],{"class":75},[41,511,418],{"class":58},[41,513,433],{"class":65},[41,515,465],{"class":58},[41,517,507],{"class":65},[41,519,76],{"class":75},[41,521,442],{"class":58},[41,523,524],{"class":43,"line":82},[41,525,92],{"emptyLinePlaceholder":91},[41,527,528],{"class":43,"line":88},[41,529,530],{"class":47},"\u002F* 3サイズ共通の face スタイル *\u002F\n",[41,532,533,536,538,540,542,544,546,548,550,552,554,556,559,561,563],{"class":43,"line":95},[41,534,535],{"class":54},".face.front",[41,537,336],{"class":58},[41,539,166],{"class":65},[41,541,69],{"class":58},[41,543,171],{"class":65},[41,545,174],{"class":58},[41,547,177],{"class":65},[41,549,180],{"class":75},[41,551,253],{"class":58},[41,553,186],{"class":65},[41,555,174],{"class":58},[41,557,558],{"class":65},"var",[41,560,174],{"class":58},[41,562,393],{"class":409},[41,564,565],{"class":58},")); }\n",[41,567,568,571,573,575,577,579,581,583,585,587,589,591,593,595,597],{"class":43,"line":101},[41,569,570],{"class":54},".face.back",[41,572,163],{"class":58},[41,574,166],{"class":65},[41,576,69],{"class":58},[41,578,171],{"class":65},[41,580,174],{"class":58},[41,582,215],{"class":65},[41,584,180],{"class":75},[41,586,220],{"class":58},[41,588,186],{"class":65},[41,590,174],{"class":58},[41,592,558],{"class":65},[41,594,174],{"class":58},[41,596,393],{"class":409},[41,598,565],{"class":58},[41,600,601],{"class":43,"line":109},[41,602,603],{"class":47},"\u002F* ...以下同様 *\u002F\n",[21,605],{},[10,607,609],{"id":608},"_3種類の回転アニメーション","3種類の回転アニメーション",[14,611,612,613,616],{},"各立方体に異なる ",[38,614,615],{},"@keyframes"," を割り当てて、互いに異なる動きをさせています。",[618,619,621],"h3",{"id":620},"外側-y軸回転x軸に-20-傾けた状態で","外側 — Y軸回転（X軸に 20° 傾けた状態で）",[31,623,625],{"className":33,"code":624,"language":35,"meta":36,"style":36},"@keyframes spin-y {\n  from { transform: rotateX(20deg) rotateY(0deg); }\n  to   { transform: rotateX(20deg) rotateY(360deg); }\n}\n",[38,626,627,636,667,699],{"__ignoreMap":36},[41,628,629,631,634],{"class":43,"line":44},[41,630,615],{"class":75},[41,632,633],{"class":409}," spin-y",[41,635,59],{"class":58},[41,637,638,641,643,645,647,649,651,653,655,657,659,661,663,665],{"class":43,"line":51},[41,639,640],{"class":54},"  from",[41,642,336],{"class":58},[41,644,166],{"class":65},[41,646,69],{"class":58},[41,648,310],{"class":65},[41,650,174],{"class":58},[41,652,496],{"class":65},[41,654,180],{"class":75},[41,656,220],{"class":58},[41,658,171],{"class":65},[41,660,174],{"class":58},[41,662,177],{"class":65},[41,664,180],{"class":75},[41,666,196],{"class":58},[41,668,669,672,674,676,678,680,682,684,686,688,690,692,695,697],{"class":43,"line":62},[41,670,671],{"class":54},"  to",[41,673,204],{"class":58},[41,675,166],{"class":65},[41,677,69],{"class":58},[41,679,310],{"class":65},[41,681,174],{"class":58},[41,683,496],{"class":65},[41,685,180],{"class":75},[41,687,220],{"class":58},[41,689,171],{"class":65},[41,691,174],{"class":58},[41,693,694],{"class":65},"360",[41,696,180],{"class":75},[41,698,196],{"class":58},[41,700,701],{"class":43,"line":82},[41,702,85],{"class":58},[14,704,705],{},"X 軸を 20° 傾けることで「斜め上から見た」自然な視点になります。",[618,707,709],{"id":708},"中間-xy逆回転","中間 — XY逆回転",[31,711,713],{"className":33,"code":712,"language":35,"meta":36,"style":36},"@keyframes spin-xy-rev {\n  from { transform: rotateX(0deg)    rotateY(0deg); }\n  to   { transform: rotateX(-360deg) rotateY(-220deg); }\n}\n",[38,714,715,724,755,787],{"__ignoreMap":36},[41,716,717,719,722],{"class":43,"line":44},[41,718,615],{"class":75},[41,720,721],{"class":409}," spin-xy-rev",[41,723,59],{"class":58},[41,725,726,728,730,732,734,736,738,740,742,745,747,749,751,753],{"class":43,"line":51},[41,727,640],{"class":54},[41,729,336],{"class":58},[41,731,166],{"class":65},[41,733,69],{"class":58},[41,735,310],{"class":65},[41,737,174],{"class":58},[41,739,177],{"class":65},[41,741,180],{"class":75},[41,743,744],{"class":58},")    ",[41,746,171],{"class":65},[41,748,174],{"class":58},[41,750,177],{"class":65},[41,752,180],{"class":75},[41,754,196],{"class":58},[41,756,757,759,761,763,765,767,769,772,774,776,778,780,783,785],{"class":43,"line":62},[41,758,671],{"class":54},[41,760,204],{"class":58},[41,762,166],{"class":65},[41,764,69],{"class":58},[41,766,310],{"class":65},[41,768,174],{"class":58},[41,770,771],{"class":65},"-360",[41,773,180],{"class":75},[41,775,220],{"class":58},[41,777,171],{"class":65},[41,779,174],{"class":58},[41,781,782],{"class":65},"-220",[41,784,180],{"class":75},[41,786,196],{"class":58},[41,788,789],{"class":43,"line":82},[41,790,85],{"class":58},[14,792,793],{},"X と Y の回転量を非整数比（360:220）にすると、同じポーズに戻らず変化し続けます。",[618,795,797],{"id":796},"内側-xyz全軸タンブリング","内側 — XYZ全軸タンブリング",[31,799,801],{"className":33,"code":800,"language":35,"meta":36,"style":36},"@keyframes spin-tumble {\n  from { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }\n  to   { transform: rotateX(360deg) rotateY(540deg) rotateZ(180deg); }\n}\n",[38,802,803,812,853,894],{"__ignoreMap":36},[41,804,805,807,810],{"class":43,"line":44},[41,806,615],{"class":75},[41,808,809],{"class":409}," spin-tumble",[41,811,59],{"class":58},[41,813,814,816,818,820,822,824,826,828,830,832,834,836,838,840,842,845,847,849,851],{"class":43,"line":51},[41,815,640],{"class":54},[41,817,336],{"class":58},[41,819,166],{"class":65},[41,821,69],{"class":58},[41,823,310],{"class":65},[41,825,174],{"class":58},[41,827,177],{"class":65},[41,829,180],{"class":75},[41,831,183],{"class":58},[41,833,171],{"class":65},[41,835,174],{"class":58},[41,837,177],{"class":65},[41,839,180],{"class":75},[41,841,183],{"class":58},[41,843,844],{"class":65},"rotateZ",[41,846,174],{"class":58},[41,848,177],{"class":65},[41,850,180],{"class":75},[41,852,196],{"class":58},[41,854,855,857,859,861,863,865,867,869,871,873,875,877,880,882,884,886,888,890,892],{"class":43,"line":62},[41,856,671],{"class":54},[41,858,204],{"class":58},[41,860,166],{"class":65},[41,862,69],{"class":58},[41,864,310],{"class":65},[41,866,174],{"class":58},[41,868,694],{"class":65},[41,870,180],{"class":75},[41,872,220],{"class":58},[41,874,171],{"class":65},[41,876,174],{"class":58},[41,878,879],{"class":65},"540",[41,881,180],{"class":75},[41,883,220],{"class":58},[41,885,844],{"class":65},[41,887,174],{"class":58},[41,889,215],{"class":65},[41,891,180],{"class":75},[41,893,196],{"class":58},[41,895,896],{"class":43,"line":82},[41,897,85],{"class":58},[14,899,900],{},"3軸同時かつ非整数比で回転させることで、完全にランダムに見える「タンブリング」になります。",[21,902],{},[10,904,905],{"id":905},"手法比較",[907,908,909,925],"table",{},[910,911,912],"thead",{},[913,914,915,919,922],"tr",{},[916,917,918],"th",{},"技術",[916,920,921],{},"次元",[916,923,924],{},"向いている表現",[926,927,928,940,950,960],"tbody",{},[913,929,930,934,937],{},[931,932,933],"td",{},"CSS gradient",[931,935,936],{},"2D",[931,938,939],{},"背景・光源",[913,941,942,945,947],{},[931,943,944],{},"CSS animation + transform",[931,946,936],{},[931,948,949],{},"軌道・移動",[913,951,952,955,957],{},[931,953,954],{},"SVG stroke-dashoffset",[931,956,936],{},[931,958,959],{},"描画・ライン",[913,961,962,967,972],{},[931,963,964],{},[371,965,966],{},"CSS 3D transform",[931,968,969],{},[371,970,971],{},"3D",[931,973,974],{},[371,975,976],{},"立体・奥行き・回転体",[362,978,980],{"type":979},"warning",[14,981,982,369,985,988,989,992],{},[38,983,984],{},"transform-style: preserve-3d",[38,986,987],{},"overflow: hidden"," と併用できません。3D シーンのコンテナには ",[38,990,991],{},"overflow"," を設定しないよう注意してください。",[994,995,996],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":36,"searchDepth":51,"depth":51,"links":998},[999,1000,1001,1002,1003,1008],{"id":12,"depth":51,"text":12},{"id":25,"depth":51,"text":26},{"id":138,"depth":51,"text":139},{"id":383,"depth":51,"text":384},{"id":608,"depth":51,"text":609,"children":1004},[1005,1006,1007],{"id":620,"depth":62,"text":621},{"id":708,"depth":62,"text":709},{"id":796,"depth":62,"text":797},{"id":905,"depth":51,"text":905},"2026-05-01T18:00:00+09:00","perspective と transform-style:preserve-3d を使い、3つの立方体が異なる軸と速度で回転する CSS 3D アートを制作します。","md",{},"\u002Farticles\u002Fhypercube-art",{"title":5,"description":1010},"articles\u002Fhypercube-art","8_FvRialiE-_G_CJefd-oEkGpR_TKXNCLUpViEHcGuo",1777568742079]