transition でアニメーションにしたいが、動かない

前提・実現したいこと

transitionを使って、マウスホバーさせてふわっとtopの位置を動かしたいのですが、アニメーションになりません。
ホバーしたらtopの位置はちゃんとずれるのですが、アニメーションで動かない理由がわからないです。

コード

html
1            <div class="book-before">
2              <div class="rect">
3                <div class="book-all book-top"></div>
4                <div class="book-all book-right"></div>
5                <div class="book-all book-covor"></div>
6              </div>
7            </div>

css
1.rect{
2position: relative;
3transform-style: preserve-3d;
4perspective-origin: 0% 100%;
5transform:rotateY(-15deg) rotateX(-10deg);
6transition-property: top;
7transition-duration: 2s;
8}
9.rect:hover{
10  top: -30px;
11}
12.book-all{
13  position: absolute;
14}
15.book-top{
16  width: 30px;
17  height: 75px;
18  transform: rotateX(-90deg);
19  transform-origin: top;
20  background-color: hsla(0,100%,50%,0.7);
21}
22.book-right{
23  width: 75px;
24  height: 150px;
25  left: 30px;
26  transform: rotateY(90deg);
27  transform-origin: left;
28  background-color: hsla(50,100%,50%,0.7);
29}
30.book-covor{
31  width: 30px;
32	height: 150px;
33  background-color: hsla(100,100%,50%,0.7);
34}

行動規範の内容に同意します

回答1件

ベストアンサー

.rectにもtopを追加してやれば動くと思います。

css
1.rect{
2position: relative;
3transform-style: preserve-3d;
4perspective-origin: 0% 100%;
5transform:rotateY(-15deg) rotateX(-10deg);
6transition-property: top;
7transition-duration: 2s;
8top: 0px; /* 追加 */
9}