animate rotate page

raw

rotate.css

1
2
3
4
5
6
7
8
9
10
body {
    background-color: red;
    animation: foo 10s infinite;
}
@keyframes foo {
  0%   { transform: rotate(0deg); }
  33%   { transform: rotate(-10deg); }
  66%   { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
raw

test.htm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
 <head>
  <title>Test rotate page</title>
  <link rel="stylesheet" href="rotate.css" />
 </head>
 <body style="background-color: grey; border: 1px solid black">
  <h1>Rotate a page with CSS</h1>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
 </body>
</html>
 
Christian Weiske Christian Weiske
owner

History