​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
.outerBox {
5
  font: 100 1em/1.5em sans-serif;
6
  background-color: black;
7
  color: white;
8
  width: 330px;
9
  padding: 5px;
10
  margin: auto;
11
  text-align: center;
12
  perspective: 400px;
13
  animation: myAnimation 2s ease 1s 3 alternate forwards;
14
}
15
​
16
.outerBox img {
17
  transform: rotate3d(1, 0, 0, 20deg);
18
}
19
​
20
@keyframes myAnimation {
21
  100% {
22
    perspective: 50px;
23
  }
24
}
25
</style>
26
​
27
<div class="outerBox">
28
  <h1>New Zealand</h1>
29
  <img src="/pix/samples/3m.jpg" alt="Scenery in New Zealand">
30
</div>