Question

我看不出有什么问题......但div没有旋转

<!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 1

您正在寻找的内容称为CSS3 animations。

以下是您示例的演示：

CODE SNIPPET

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

<强> JSFIDDLE

试图让这个div在加载时旋转

1 个答案: