Home Text Editor responsive design

metaldallen · October 7, 2015

Hi

Im trying to make some 3d divs with this code:

Quote

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>

Sign In

Home Text Editor responsive design

Recommended Posts

metaldallen

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com