metaldallen Posted October 7, 2015 Share Posted October 7, 2015 Hi Im trying to make some 3d divs with this code: I have looked at it with firefox responsive design view. The divs overlaps each other in phone resolution, like an iphone or such. I want them to go under each other. How do i use excisting media queries with bootstrap? i'm new to responsive design and dont know how to use it 100 percent. Can i call other classes and use them? or do a own media query for my need? what is the best practice way to code it? Thanks in advance. <!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> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now