Search the Community
Showing results for tags 'media queries'.
Found 2 results
-
Hi Im trying to make some 3d divs with this code: <!DOCTYPE html> <html> <head> <title>Flipcard</title> <meta charset="UTF-8"> <!--<link href="main.css" type="text/css" rel="stylesheet" />--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> </head> <body> <div class="flip3d"> <div class="back" onclick="flipit(this.parentNode, false);"><p align="center">Box 1 - BACK</p></div> <div class="front" onclick="flipit(this.parentNode, true);"><p align="center">Box 1 - FRONT</p></div> </div> <div class="flip3d"> <div class="back" onclick="flipit(this.parentNode, false);"><p align="center">Box 2 - BACK</p></div> <div class="front" onclick="flipit(this.parentNode, true);"><p align="center">Box 2 - FRONT</p></div> </div> <div class="flip3d"> <div class="back" onclick="flipit(this.parentNode, false);"><p align="center">Box 3 - BACK</p></div> <div class="front" onclick="flipit(this.parentNode, true);"><p align="center">Box 3 - FRONT</p></div> </div> </body> </html> .flip3d { width:200px; height:300px; margin:25px; float:left; } .flip3d > .front { position:absolute; -webkit-transform: perspective(600px) rotateY(0deg); transform: perspective(600px) rotateY(0deg); background: #FC0; width: 240px; height:200px; border-radius: 17px; -webkit-backface-visibility:hidden; backface-visibility:hidden; transition: webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3d > .back { position:absolute; -webkit-transform: perspective(600px) rotateY(180deg); transform: perspective(600px) rotateY(180deg); background: #80BFFF; width: 240px; height:200px; border-radius: 17px; -webkit-backface-visibility:hidden; backface-visibility:hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3d:hover > .front { web-kit-transform: perspective(600px) rotateY(-180deg); transform: perspective(600px) rotateY(-180deg); } .flip3d:hover > .back { -webkit-transform: perspective(600px) rotateY(0deg); transform: perspective(600px) rotateY(0deg); } <script> function flipit(el, boo) { if(boo == true){ el.children[1].style.webkitTransform = "perspective(600px) rotateY(-180deg)"; el.children[0].style.webkitTransform = "perspective(600px) rotateY(0deg)"; el.children[1].style.transition = "all .5s linear 0s"; el.children[0].style.transition = "all .5s linear 0s"; el.children[1].style.transform = "perspective(600px) rotateY(-180deg)"; el.children[0].style.transform = "perspective(600px) rotateY(0deg)"; el.children[1].style.webkitTransition = "all .5s linear 0s"; el.children[0].style.webkitTransition = "all .5s linear 0s"; } if(boo == false){ el.children[1].style.webkitTransform = "perspective(600px) rotateY(0deg)"; el.children[0].style.webkitTransform = "perspective(600px) rotateY(180deg)"; el.children[1].style.transition = "all .5s linear 0s"; el.children[0].style.transition = "all .5s linear 0s"; el.children[1].style.transform = "perspective(600px) rotateY(0deg)"; el.children[0].style.transform = "perspective(600px) rotateY(180deg)"; el.children[1].style.webkitTransition = "all .5s linear 0s"; el.children[0].style.webkitTransition = "all .5s linear 0s"; } } </script>
-
Hola!! Bueno soy nueva y hasta el momento había podido encontrar las soluciones a mis dudas por la internet, pero ahora caí en pánico y no encuentro la solución a mi problema así que les pido ayuda urgente!! Estoy modificando el diseño (css y un poco en las plantillas) del theme default de prestashop 1.5 , el problema es que tengo tanto el diseño de móvil como el de desktop, sin embargo el diseño en tablet debiese ser muy parecido al de escritorio y no puedo solucionarlo con media queries (css) para ajustar los tamaños, ya que me muestra el theme "mobile" y no sé como deshabilitarlo (solo para tablet) Espero se haya entendido mi problema y alguien me pueda dar pistas de como solucionarlo !! Se los agradeceré mil, saludos a todos!!
