CSS 3D Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3D Effects</title>
</head>
<style>
body {
background-color: #ef9a;
}
div {
margin: auto;
padding-top:50px ;
margin-bottom: 10px;
border: 1px solid black;
width: 200px;
height: 100px;
text-align: center;
background-color: rgba(0, 255, 255,0.9);
transition:1.5s ease-in-out;
}
.rotate-x:hover {
transform: rotateX(100deg);
box-shadow: 2px 4px 18px rgba(255, 0,0 , 0.6);
}
.rotate-y:hover {
transform: rotateY(150deg);
box-shadow: 2px 4px 18px rgba(255, 0,0 , 0.6);
}
.rotate-z:hover {
transform: rotateZ(90deg);
box-shadow: 2px 4px 18px rgba(255, 0,0 , 0.6);
}
</style>
<body>
<div class="normal">Normal</div>
<div class="rotate-x">Rotate-x at 120degree</div>
<div class="rotate-y">Rotate-y at 150degree</div>
<div class="rotate-z">Rotate-z at 90degree</div>
</body>
</html>
No comments:
Post a Comment