Animation rotate

<!DOCTYPE html>
<html>
<head>
<style>
.element
{
 display: inline-block;
 background-color: #0074d9;
 height: 100px;
 width: 100px;
 color: white;
 text-align: center;
 opacity: .7;
 font-family: Verdana, sans-serif;
 border: 3px solid rgba(0,0,0,.3);
 margin-bottom: 30px;
}
.one
{
 transform: rotateX(40deg);
 animation: one 2s infinite;
 animation-direction: alternate;
} 
.two
{
 transform: rotateY(40deg);
 animation: two 2s infinite;
 animation-direction: alternate;
 background-color: #831a4a;
}
.three
{
 transform: rotateZ(100deg);
 animation: three 2s infinite;
 animation-direction: alternate;
 background-color: #439772;
}
@keyframes one
{
0% {
transform: rotateX(0);
}
100%
{
transform: rotateX(50deg);
}
}
@keyframes two {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(70deg);
}
}
@keyframes three {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(100deg);
}
}
body, html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="element one">
rotateX
</div>
<div class="element two">
rotateY
</div>
<div class="element three">
rotateZ
</div>
</body>
</html>

Comments

Post a Comment

Popular Posts