almost 9 years ago
Hello, readers, this is a small blog on how to rotate in CSS3 around its axis. To achieve this we will make a file index.html. Copy the below-written code in this file.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Rotation around its axis</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="wrapper-x">S</div><div class="wrapper-y">S</div></body></html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rotation around its axis</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper-x">S</div>
<div class="wrapper-y">S</div>
</body>
</html>
Next, we will make style.css and copy the below written below.
.wrapper-x{position: absolute;left: 45%;top:30%;font-size:90px;-webkit-animation: spinX 5s infinite;}.wrapper-y{position: absolute;left: 45%;top:30%;width:50px;font-size:90px;-webkit-animation: spinY 5s infinite;}@-webkit-keyframes spinX{0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}}@-webkit-keyframes spinY{0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}}
.wrapper-x
{
position: absolute;
left: 45%;
top:30%;
font-size:90px;
-webkit-animation: spinX 5s infinite;
}
.wrapper-y
{
position: absolute;
left: 45%;
top:30%;
width:50px;
font-size:90px;
-webkit-animation: spinY 5s infinite;
}
@-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
@-webkit-keyframes spinY
{
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}
}
Comment: Transforms have a "transform-origin" property. When transform origin is not specified, it is automatically set at (50%, 50%) of the element. The 0% and 100% represent your "from" and "to" clauses, this allows you to add a number of lines as you wish to increment the movement over your specified timeframe.
Note:-The transform property supports all latest version of Safari 3.2+, Chrome 4+
, Firefox 3.5+, Opera 10.5+, and IE 9.
0 Comment(s)