やっつけですが
html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #square {
8 width: 400px;
9 height: 400px;
10 border: 1px solid black;
11 box-sizing: content-box;
12
13 animation: standup 2s ease-out;
14 transform-origin: bottom;
15 }
16
17 @keyframes standup {
18 from {
19 transform: matrix3d(
20 1, 0, 0, 0,
21 0, 1, 0, -0.003,
22 0, 0, 1, 0,
23 0, 0, 0, 1);
24 }
25 to {
26 transform: matrix3d(
27 1, 0, 0, 0,
28 0, 1, 0, 0,
29 0, 0, 1, 0,
30 0, 0, 0, 1);
31 }
32 }
33 </style>
34</head>
35<body>
36 <div id="square"></div>
37</body>
38</html>
あまり詳しくないので突っ込んだことはお答えできません…あしからず。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。