seleccionar - Establecer la perspectiva adecuada para elementos secundarios en un plano 3d en CSS

selector padre css (3)

Tengo una rejilla hexagonal SVG inclinada en un ángulo de 45 grados. En hexágonos individuales, me gustaría colocar imágenes (representadas por los rectángulos rojos) que parecen estar en posición vertical con respecto al plano de la cuadrícula. Las imágenes / rectángulos no necesariamente tienen que estar a 90 grados completos, pero me está costando mucho conseguir que tengan una perspectiva que sea incluso un poco diferente del plano.

¿Hay alguna manera de desarmar la perspectiva de los elementos secundarios o volver a trabajar el CSS de alguna manera para que se vea bien?

Código

.display { animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards; -webkit-animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 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, 1.6); -ms-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6); -o-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6); transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 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, 204, 255, 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, 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, 204, 255, 0.8); opacity: 1; } #blockedHexPattern line { stroke: #0CF; stroke-width: 0.0625rem; } #hexGrid .rect { transform: rotateX(0deg); }

SVG aún no admite transformaciones 3D; incluso si puede transformar su elemento .hexGrid svg (que todavía está en el contexto html y por lo tanto acepta la transformación 3D), su contenido quedará plano dentro de él, no hay transform-style que revertirá este comportamiento.

Su mejor opción sería tener cada hexágono como su propio elemento SVG para que puedan transformarse en 3D por separado. Algo como:

<div class="hexGrid" style="{3d transform}"> <svg class="hex" style="{reversed 3d transform}"> <polygon /> <rect /> </svg> <svg class="hex"> ... </svg> </div>

~~También está mezclando etiquetas HTML con etiquetas SVG: <a> no existe en SVG.~~ ~~Puede usar el atributo xlink:href en cualquier elemento.~~

Como el manejo de la transformación 3D en SVGElements es un problema, una solución podría estar creando otro elemento superpuesto para agregar los elementos transformados;

lo más difícil en esta solución es encontrar los valores para una representación óptima;

además de eliminar la perspectiva en la propiedad de transformación #hexGrid (CSS), el marcado debe ser el mismo que en la pregunta original, todo el trabajo se realiza a través de JS.

//function for checking transform property in css function checkCSS(selector,prop){ var sel; [].slice.call(document.styleSheets).forEach(function(x){ sel= [].slice.call(x.rules).filter(function(rule){ return rule.selectorText==''#hexGrid''; }) return sel }) return sel[sel.length-1].style[prop] } //store transform property var storeTrans = checkCSS(''#hexGrid'',''transform''); //straighten svg var hexGrid = document.getElementById(''hexGrid''); hexGrid.style.transform = ''rotateX(0)''; //get the position/dimensions for perfectly tilted red squares var rects=document.querySelectorAll(''rect''); var coorArray = [].slice.call(rects).map(function(x){return x.getBoundingClientRect()}) var stationMap = document.getElementById(''stationMap''); //create element for creating an layer and append var container = document.createElement(''div''); container.className=''container''; container.style.perspective=''33vW'';//reduced for simulating foreground container.style.height=container.style.width = ''100%''; container.style.transform=''translateY(-100%) rotateX(45deg) scale(1.6)''; stationMap.appendChild(container); //create perfectly tilted red squares coorArray.forEach(function(x){ var el = document.createElement(''div'') el.style.position=''absolute''; el.style.top= x.top+''px''; el.style.left=x.left+''px''; el.style.width= x.width+''px''; el.style.height= x.height+''px''; el.style.background= ''tomato''; el.style.transform=''perspective(12vw) rotateX(130deg) translate3d(-15%, 50%,0)''; container.appendChild(el) }) //set prosperctive and transform-style on common parent node stationMap.style.transformStyle=''preserve-3d''; stationMap.style.perspective=''44vw''; //set transform value back and rip out old rect hexGrid.style.transform = storeTrans; Array.prototype.slice.call(rects).forEach(function(n){ n.parentNode.removeChild(n) })

.display { animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards; -webkit-animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 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: rotateX(45deg) scale3d(1.6, 1.6, 1.6); /*add perspective to parent*/ -moz-transform: rotateX(45deg) scale3d(1.6, 1.6, 1.6); -ms-transform: rotateX(45deg) scale3d(1.6, 1.6, 1.6); -o-transform:rotateX(45deg) scale3d(1.6, 1.6, 1.6); transform: rotateX(45deg) scale3d(1.6, 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, 204, 255, 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, 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, 204, 255, 0.8); opacity: 1; } #blockedHexPattern line { stroke: #0CF; stroke-width: 0.0625rem; } #hexGrid .rect { transform: rotateX(0deg); }

violín

Resumiendo:

inclinamos el elemento svg a su posición normal;
obtener las coordenadas de dónde se colocan las imágenes / cuadros en un escenario no transformado;
crear un nuevo elemento de las mismas dimensiones anexado debajo de la capa svg ;
hacer elementos para reemplazar cuadros de imágenes en un elemento nuevo (usando las coordenadas del punto-2);
transformar nuevo elemento agregando translateY(-100%) como primer valor, de modo que se superpondrá svg ;
transforma el elemento svg en los mismos valores de elemento añadido (claramente sin translateY(-100%) ).

Para mantener el efecto de desplazamiento sobre los elementos svg, podemos jugar con el apilamiento de contenidos (pero está limitado, por ejemplo ).

Probado solo en la última versión de Chrome: falta de cualquier otra compatibilidad con el navegador.

Como las transformaciones 3D no se pueden manejar correctamente en los elementos svg, sugeriría un enfoque diferente para la cuadrícula de hexágonos. Se puede lograr con html y css simples como se muestra en esta pregunta: Rejilla de hexágonos receptivos .

Esto permite realizar transformaciones 3D en elementos secundarios con la propiedad de transform-style .

Adaptado a su caso de uso, puede verse así:

MANIFESTACIÓN

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,0,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,0,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,0,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; }

Esta cuadrícula de hexágonos se puede adaptar a varios casos de uso (número de hexágonos por fila, alineación hexagonal ...) más ejemplos en esta colección: Rejillas de hexágonos sensibles