我有一个SVG十六进制格栅倾斜45度角.在单独的十六进制上,我想将看起来像直立的图像(由红色矩形表示)分别放置在格子的平面上.图像/矩形不一定必须是完整的90度,但是我有最难的时间让他们有任何与飞机有点不同的观点.
有没有办法解决孩子元素的观点,或者以某种方式重新调整CSS变换来使这个样子正确吗？
码
@H_502_6@.display { animation: displayFlicker 100ms cubic-bezier(.37,.41,1.74) 100ms 1 normal forwards; -webkit-animation: displayFlicker 100ms cubic-bezier(.37,1.74) 100ms 1 normal forwards; background: #000; display: block; border-left: 0.25rem solid #000; border-right: 0.25rem solid #000; Box-sizing: border-Box; -moz-Box-sizing: border-Box; height: 480px; overflow: hidden; width: 1096px; } #hexGrid { Box-sizing: border-Box; -moz-Box-sizing: border-Box; display: block; height: 100%; -webkit-transform: perspective(44vw) rotateX(45deg) scale3d(1.6,1.6,1.6); -moz-transform: perspective(44vw) rotateX(45deg) scale3d(1.6,1.6); -ms-transform: perspective(44vw) rotateX(45deg) scale3d(1.6,1.6); -o-transform: perspective(44vw) rotateX(45deg) scale3d(1.6,1.6); transform: perspective(44vw) rotateX(45deg) scale3d(1.6,1.6); transform-style: preserve-3d; width: 100%; } .hexContainer { outline: none; transform-style: preserve-3d; } .hex { Box-sizing: border-Box; -moz-Box-sizing: border-Box; display: inline-block; height: 4.4vmin; opacity: 1; outline: none; position: relative; stroke: #0CF; stroke-width: 0.0625rem; transform: scale3d(1,1,1); transition: all linear 300ms; width: 8vmin; } .hex.open { fill: rgba(0,204,255,0.3); } .hex.blocked { fill: url(#blockedHexPattern); fill-opacity: 0.3; } .hexContainer:focus .open,.hexContainer:hover .open { cursor: pointer; fill: rgba(0,0.8); outline: none; } .hexContainer:focus .blocked,.hexContainer:hover .blocked { cursor: pointer; fill: url(#blockedHexPattern); fill-opacity: 1; outline: none; } .hexContainer:focus .occupied,.hexContainer:hover .occupied { cursor: pointer; fill: rgba(50,50,0.8); outline: none; } .hexContainer:focus .open,.hexContainer:focus .open.unblock { transform-origin: 50% 0%; } .hexContainer:focus .blocked { opacity: 1; transform-origin: 50% 0%; } .hexContainer.active .open { fill: rgba(0,0.8); opacity: 1; } #blockedHexPattern line { stroke: #0CF; stroke-width: 0.0625rem; } #hexGrid .rect { transform: rotateX(0deg); } @H_502_6@<div id="stationMap" class="display"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="55 -30 360 360" id="hexGrid"> <defs> <pattern x="0" y="0" height="10" width="10" patternUnits="userSpaceOnUse" id="blockedHexPattern"> <line x1="0" y1="10" x2="10" y2="0"></line> </pattern> </defs> <a id="hex0-0" class="hexContainer"> <polygon class="hex open" points="81.96152422706632,45 55.98076211353316,60 30,45 30.000000000000004,14.999999999999996 55.98076211353315,0 81.96152422706632,14.999999999999986"></polygon> </a> <a id="hex0-2" class="hexContainer"> <polygon class="hex blocked" points="185.88457268119896,45 159.9038105676658,60 133.92304845413264,45 133.92304845413264,14.999999999999996 159.9038105676658,0 185.88457268119896,14.999999999999986" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex0-6" class="hexContainer"> <polygon class="hex blocked" points="393.7306695894642,45 367.749907475931,60 341.76914536239786,45 341.76914536239786,14.999999999999996 367.749907475931,0 393.7306695894642,14.999999999999986" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex0-7" class="hexContainer"> <polygon class="hex blocked" points="445.6921938165305,45 419.71143170299734,60 393.7306695894642,45 393.7306695894642,14.999999999999996 419.71143170299734,0 445.6921938165305,14.999999999999986" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex1-0" class="hexContainer"> <polygon class="hex open" points="55.98076211353316,90 30.000000000000004,105 4.01923788646684,90 4.019237886466843,60 29.999999999999993,45 55.98076211353315,59.999999999999986"></polygon> <rect class="rect" fill="red" x="5" y="67.5" width="50" height="40"/> </a> <a id="hex1-3" class="hexContainer"> <polygon class="hex blocked" points="211.8653347947321,90 185.88457268119893,105 159.90381056766577,90 159.90381056766577,60 185.88457268119893,45 211.8653347947321,59.999999999999986" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex1-4" class="hexContainer"> <polygon class="hex open" points="263.82685902179844,90 237.84609690826525,105 211.8653347947321,90 211.8653347947321,60 237.84609690826525,45 263.8268590217984,59.999999999999986"></polygon> </a> <a id="hex1-5" class="hexContainer"> <polygon class="hex open" points="315.7883832488647,90 289.80762113533154,105 263.8268590217984,90 263.8268590217984,60 289.80762113533154,45 315.7883832488647,59.999999999999986"></polygon> </a> <a id="hex1-6" class="hexContainer"> <polygon class="hex open" points="367.749907475931,90 341.76914536239786,105 315.7883832488647,90 315.7883832488647,59.999999999999986"></polygon> </a> <a id="hex1-7" class="hexContainer"> <polygon class="hex open" points="419.71143170299734,90 393.7306695894642,105 367.749907475931,90 367.749907475931,59.999999999999986"></polygon> <rect class="rect" fill="red" x="369" y="67.5" width="50" height="40"/> </a> <a id="hex2-0" class="hexContainer"> <polygon class="hex open" points="81.96152422706632,134.99999999999997 55.98076211353316,150 30,134.99999999999997 30.000000000000004,104.99999999999999 55.98076211353315,89.99999999999999 81.96152422706632,104.99999999999997"></polygon> </a> <a id="hex2-2" class="hexContainer"> <polygon class="hex blocked" points="185.88457268119896,134.99999999999997 159.9038105676658,150 133.92304845413264,134.99999999999997 133.92304845413264,104.99999999999999 159.9038105676658,89.99999999999999 185.88457268119896,104.99999999999997" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex2-3" class="hexContainer"> <polygon class="hex open" points="237.84609690826525,134.99999999999997 211.8653347947321,150 185.88457268119893,134.99999999999997 185.88457268119893,104.99999999999999 211.8653347947321,89.99999999999999 237.84609690826525,104.99999999999997"></polygon> </a> <a id="hex2-4" class="hexContainer"> <polygon class="hex open" points="289.80762113533154,134.99999999999997 263.8268590217984,150 237.84609690826522,134.99999999999997 237.84609690826522,104.99999999999999 263.8268590217984,89.99999999999999 289.80762113533154,104.99999999999997"></polygon> </a> <a id="hex2-5" class="hexContainer"> <polygon class="hex open" points="341.76914536239786,134.99999999999997 315.7883832488647,150 289.80762113533154,134.99999999999997 289.80762113533154,104.99999999999999 315.7883832488647,89.99999999999999 341.76914536239786,104.99999999999997"></polygon> </a> <a id="hex2-6" class="hexContainer"> <polygon class="hex open" points="393.7306695894642,134.99999999999997 367.749907475931,150 341.76914536239786,134.99999999999997 341.76914536239786,104.99999999999999 367.749907475931,89.99999999999999 393.7306695894642,104.99999999999997"></polygon> </a> <a id="hex2-7" class="hexContainer"> <polygon class="hex open" points="445.6921938165305,134.99999999999997 419.71143170299734,150 393.7306695894642,134.99999999999997 393.7306695894642,104.99999999999999 419.71143170299734,89.99999999999999 445.6921938165305,104.99999999999997"></polygon> </a> <a id="hex3-0" class="hexContainer"> <polygon class="hex open" points="55.98076211353316,179.99999999999997 30.000000000000004,194.99999999999997 4.01923788646684,179.99999999999997 4.019237886466843,149.99999999999997 29.999999999999993,134.99999999999997 55.98076211353315,149.99999999999994"></polygon> </a> <a id="hex3-3" class="hexContainer"> <polygon class="hex blocked" points="211.8653347947321,179.99999999999997 185.88457268119893,194.99999999999997 159.90381056766577,179.99999999999997 159.90381056766577,149.99999999999997 185.88457268119893,149.99999999999994" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex3-5" class="hexContainer"> <polygon class="hex blocked" points="315.7883832488647,179.99999999999997 289.80762113533154,194.99999999999997 263.8268590217984,179.99999999999997 263.8268590217984,149.99999999999997 289.80762113533154,149.99999999999994" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex3-7" class="hexContainer"> <polygon class="hex blocked" points="419.71143170299734,179.99999999999997 393.7306695894642,194.99999999999997 367.749907475931,179.99999999999997 367.749907475931,149.99999999999997 393.7306695894642,149.99999999999994" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex4-0" class="hexContainer"> <polygon class="hex open" points="81.96152422706632,224.99999999999997 55.98076211353316,239.99999999999997 30,224.99999999999997 30.000000000000004,194.99999999999997 55.98076211353315,179.99999999999997 81.96152422706632,194.99999999999994"></polygon> </a> <a id="hex4-1" class="hexContainer"> <polygon class="hex blocked" points="133.92304845413264,224.99999999999997 107.94228634059948,239.99999999999997 81.96152422706632,224.99999999999997 81.96152422706632,194.99999999999997 107.94228634059948,179.99999999999997 133.92304845413264,194.99999999999994" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex4-2" class="hexContainer"> <polygon class="hex blocked" points="185.88457268119896,224.99999999999997 159.9038105676658,239.99999999999997 133.92304845413264,224.99999999999997 133.92304845413264,194.99999999999997 159.9038105676658,179.99999999999997 185.88457268119896,194.99999999999994" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex4-3" class="hexContainer"> <polygon class="hex blocked" points="237.84609690826525,224.99999999999997 211.8653347947321,239.99999999999997 185.88457268119893,224.99999999999997 185.88457268119893,194.99999999999997 211.8653347947321,179.99999999999997 237.84609690826525,194.99999999999994" fill="url(#blockedHexPattern)"></polygon> </a> <a id="hex4-4" class="hexContainer"> <polygon class="hex open" points="289.80762113533154,224.99999999999997 263.8268590217984,239.99999999999997 237.84609690826522,224.99999999999997 237.84609690826522,194.99999999999994"></polygon> </a> <a id="hex4-5" class="hexContainer"> <polygon class="hex open" points="341.76914536239786,224.99999999999997 315.7883832488647,239.99999999999997 289.80762113533154,224.99999999999997 289.80762113533154,194.99999999999997 315.7883832488647,179.99999999999997 341.76914536239786,194.99999999999994"></polygon> </a> <a id="hex4-6" class="hexContainer"> <polygon class="hex open" points="393.7306695894642,224.99999999999997 367.749907475931,239.99999999999997 341.76914536239786,224.99999999999997 341.76914536239786,194.99999999999994"></polygon> </a> </svg> </div>解决方法
由于3d变换在svg元素上无法正确处理,我将为六边形网格提出一种不同的方法.这可以用普通的html和css来实现,如这个问题所示：
Responsive grid of hexagons.
这允许使用transform-style property对子元素进行3d转换.
适应你的用例,它可以看起来像这样：
@H_502_6@body{ background:rgb(123,158,158); perspective:500px; } #categories{ width:70%; margin:0 auto; transform:rotateX(45deg); transform-style: preserve-3d; } #categories:after{ content:""; display:block; clear:both; } #categories li{ position:relative; list-style-type:none; width:17.364%; /* = (100-4.5) / 5.5 */ padding-bottom: 20.05%; /* = width /0.866 */ float:left; overflow:hidden; visibility:hidden; transform: rotate(-60deg) skewY(30deg); } #categories li:nth-child(10n+6),#categories li:nth-child(10n+7),#categories li:nth-child(10n+8),#categories li:nth-child(10n+9),#categories li:nth-child(10n+10) { margin-top: -4.2%; margin-bottom: -4.2%; transform: translateX(50%) rotate(-60deg) skewY(30deg); } #categories li:nth-child(10n+6){ margin-left:0.5%; } #categories li:nth-child(5n+2) { margin-left:1%; margin-right:1%; } #categories li:nth-child(5n+3),#categories li:nth-child(5n+4){ margin-right:1%; } #categories li div{ position:absolute; visibility:visible; width:100%; height:100%; text-align:center; color:#fff; overflow:hidden; transform: skewY(-30deg) rotate(60deg); background-color:rgba(0,.2); transition:background-color .3s; border-left:2px solid #000; border-right:2px solid #000; Box-sizing:border-Box; -webkit-backface-visibility:hidden; } #categories li div:hover,#categories .up:hover span:after{ background-color:rgba(0,.5); } #categories li div:before,#categories li div:after{ content:''; position:absolute; width:100%;height:49.6%; left:-2px;top:25.5%; border-left:2px solid #000; border-right:2px solid #000; transform:rotate(60deg); visibility:visible; } #categories li div:before{ transform:rotate(-60deg); } #categories li img{ display:block; left:-100%; right:-100%; width: auto; height:100%; margin:0 auto; visibility:visible; } #categories .up,#categories .up div{ transform-style:preserve-3d; overflow:visible; visibility:hidden; background-color:transparent; } #categories .up span{ display:block; width:100%;height:100%; position:absolute; top:0; left:0; overflow:hidden; } #categories .up span:after{ content:''; position:absolute; left:0;top:0; width:100%;height:100%; border-left:2px solid #000; border-right:2px solid #000; Box-sizing:border-Box; background-color:rgba(0,.2); transform: skewY(-30deg) rotate(60deg); transition:background-color .3s; visibility:visible; } #categories .up img{ width:100%; height:auto; position:absolute; transform-origin: 50% 100%; transform: rotateX(-45deg); z-index:1; } @H_502_6@<ul id="categories" class="clr"> <li><div></div></li> <li class="up"><span></span><div><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt=""/></div></li> <li><div></div></li> <li><div></div></li> <li class="up"><span></span><div><img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt=""/></div></li> <li class="pusher"></li> <li class="pusher"></li> <li class="pusher"></li> <li><div></div></li> <li class="pusher"></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li class="pusher"></li> <li><div></div></li> <li class="up"><span></span><div><img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt=""/></div></li> <li class="pusher"></li> <li><div></div></li> <li><div></div></li> </ul>这个六边形网格可以适应几个用例(每行六边形的数量,六边形对齐…)这个集合中的更多示例：Responsive grids of hexagons
