We would like to know how to transform: skew(8deg, 12deg);.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
nav>div {<!-- w w w . j a v a 2 s .co m-->
margin-right: 50px;
margin-top: 50px;
-webkit-transform: skew(8deg, 12deg);
-moz-transform: skew(8deg, 12deg);
-ms-transform: skew(8deg, 12deg);
transform: skew(8deg, 12deg);
opacity: 0.45;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
position: relative;
z-index: 8;
}
nav>div:hover {
opacity: 1;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
#fade {
width: 100%;
height: 120%;
background-color: #000;
background-size: cover;
position: absolute;
top: 0px;
left: 0px;
z-index: 7;
-webkit-animation: fadeout 6s;
animation: fadeout 6s;
opacity: 0;
}
@keyframes fadeout {
from { opacity:1;}
to {opacity: 0;}
}
@-webkit-keyframes fadeout {
from { opacity:1;}
to {opacity: 0;}
}
</style>
</head>
<body>
<div id="fade">Testing</div>
<nav>
<div>
<a href="#">Navigation</a>
<a href="#">Navigation</a>
<a href="#">Navigation</a>
<a href="#">Navigation</a>
</div>
</nav>
</body>
</html>
The code above is rendered as follows: