<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}
body{
min-height: 100vh;
min-width: 100vw;
background: black;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
}
.main{
perspective: 500px;
}
.main span{
display: block;
margin: 1rem;
background: blue;
transition-duration: .6s;
color: white;
border-radius: 10px;
}
.main span:nth-child(odd){
text-align: left;
background: linear-gradient(-90deg, #0fff00, rgb(38,0,248));
transform: rotateY(50deg);
}
.main span:nth-child(even){
background: linear-gradient(90deg, #0fff00, rgb(38,0,248));
transform: rotateY(-50deg);
text-align: right;
}
.main span:nth-child(even):hover{
transform: translateX(30px) rotateY(-30deg);
}
.main span:nth-child(odd):hover{
transform: translateX(-30px) rotateY(30deg);
}
</style>
</head>
<body>
<div class="main">
<span>Home</span>
<span>About</span>
<span>contact</span>
<span>Suscribe</span>
</div>
</body>
</html>
Comments
Post a Comment