ibiza ibiza - 3 months ago 8
CSS Question

Trying to make this div rotate on load

I can't see what's wrong...but the div is not rotating

<!DOCTYPE html>
<html>
<head>

<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>

<style type="text/css">

.rotate
{

margin:121px 149px;

width:483px;
height:298px;

background:#676470;
color:#fff;
font-family:Tahoma;
font-size:2em;

text-align:center;

transition:all 5s ease;

-webkit-transform: rotateZ(-3240deg);
-ms-transform: rotateZ(-3240deg);
transform: rotateZ(-3240deg);

}

.rotate div {
padding-top: 3em;
}

.rotate:active
{
}

</style>
</head>
<body>

<div class="rotate"><div>Hello</div></div>

</body>
</html>

Answer

What you're looking for is called CSS3 animations.

Here's a demo of your example:


CODE SNIPPET:

.rotate {
  margin: 121px 149px;
  width: 483px;
  height: 298px;
  background: #676470;
  color: #fff;
  font-family: Tahoma;
  font-size: 2em;
  text-align: center;
  animation: rotateZ 5s;
}
.rotate div {
  padding-top: 3em;
}
@keyframes rotateZ {
  to {
    transform: rotateZ(-3240deg);
  }
}
<div class="rotate">
  <div>Hello</div>
</div>


JSFIDDLE

Comments