OfirLana/gist:afc5238abccec164dbee0dbfab95b946

## gistfile1.txt
HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

</body>

<html>

    <head lang="en">
        <meta charset="UTF-8">

    </head>


    <body>
        <div class="card_container">
            <h1 class="main_title">Click on Me!</h1>
            <div class="card">
                <div class="card front">
                    <img src="https://www.capitalfm.co.ke/news/files/2016/11/0ebef0822ca1436a3c96afc010c05b1ba6504256.jpg"
                    width="150" height="150" class="card_img">
                </div>
                <div class="card back">
                    <img src="http://www.blogohblog.com/wp-content/pop/2008/07/funnyjavascript.gif" width="150" height="150" class="card_img">
                </div>
            </div>
        </div>

        <script src="index.js"></script>
    </body>

    </html>


css code
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #777;
    /* padding: 3rem; */
}

.main_title {
    font-size: 24px;
}

.card_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px;
    position: relative;
    transform:perspective(600) ;
}

.card_img {
    border-radius: 6px;
    cursor: pointer;
}

.card {
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    width: 100%;
    text-align: center;
    top: 150px;
}

.card.front {
    backface-visibility: hidden;
    border-radius: 6px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
    transform: rotateY(0deg);
    text-align: center;
}
.card.back {
    background: #eaeaed;
    color: #0087cc;
    line-height: 150px;
    text-align: center;
    transform: rotateY(180deg);
    text-align: center;
}


JS CODE
var card = document.querySelector(".card_img");

card.addEventListener("click", rotate);

function rotate() {
   card.style.transform  = 'rotate('+180+'deg)';
   card.style.borderRadius = '50%';
   card.style.background = '#ff7b29;';
}
	HTML
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>

	</body>

	<html>

	<head lang="en">
	<meta charset="UTF-8">

	</head>



	<body>
	<div class="card_container">
	<h1 class="main_title">Click on Me!</h1>
	<div class="card">
	<div class="card front">
	<img src="https://www.capitalfm.co.ke/news/files/2016/11/0ebef0822ca1436a3c96afc010c05b1ba6504256.jpg"
	width="150" height="150" class="card_img">
	</div>
	<div class="card back">
	<img src="http://www.blogohblog.com/wp-content/pop/2008/07/funnyjavascript.gif" width="150" height="150" class="card_img">
	</div>
	</div>
	</div>

	<script src="index.js"></script>
	</body>

	</html>



	css code
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	html {
	font-size: 62.5%;
	}

	body {
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.7;
	color: #777;
	/* padding: 3rem; */
	}

	.main_title {
	font-size: 24px;
	}

	.card_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px;
	position: relative;
	transform:perspective(600) ;
	}

	.card_img {
	border-radius: 6px;
	cursor: pointer;
	}

	.card {
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	transition: all 1s ease-in-out;
	width: 100%;
	text-align: center;
	top: 150px;
	}

	.card.front {
	backface-visibility: hidden;
	border-radius: 6px;
	height: 100%;
	position: absolute;
	overflow: hidden;
	width: 100%;
	transform: rotateY(0deg);
	text-align: center;
	}
	.card.back {
	background: #eaeaed;
	color: #0087cc;
	line-height: 150px;
	text-align: center;
	transform: rotateY(180deg);
	text-align: center;
	}



	JS CODE
	var card = document.querySelector(".card_img");

	card.addEventListener("click", rotate);

	function rotate() {
	card.style.transform = 'rotate('+180+'deg)';
	card.style.borderRadius = '50%';
	card.style.background = '#ff7b29;';
	}