Text Rotation Using Animation
Text Rotation Using Animation
<!DOCTYPE html>
<html>
<head>
<style>
.element
{
display: inline-block;
height: 50px;
width: 50px;
color: white;
text-align: center;
opacity: .7;
font-family: Verdana, sans-serif;
border: 3px solid rgba(0,0,0,.3);
margin-bottom: 30px;
}
.two
{
transform: rotateY(70deg);
animation: two 2s infinite;
animation-direction: alternate;
color:red;
font-size:48px;
text-shadow:1px 1px 1px red;
}
@keyframes two {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
body, html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="element two">
<b>G</b>
</div>
</body>
</html>
https://webtipstop.blogspot.com/
ReplyDelete