カードが回転するような動きを実装する

2017.10.18

CSSのtransitionとtransform rotate()を使って、カードが回転するような動きを実装してみます。

サンプルコード

オンマウスで画像が切り替わるようにしてみます。

HTML

1
2
3
4
5
6
<div class="card">
    <a href="">
        <img src="surface.jpg" alt="" class="card_surface" />
        <img src="reverse.jpg" alt="" class="card_reverse" />
    </a>
</div>

CSS

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
28
29
30
31
32
.card {
    position: relative;
    width: 250px;
}
.card a {
    display: block;
}
.card_reverse {
    position: absolute;
    top: 0;
    left: 0;
}
 
/* 表面の表示 */
.card_surface {
    transform: rotateY(0deg);
    transition: transform 300ms 150ms;
}
.card_reverse {
    transform: rotateY(90deg);
    transition: transform 300ms;
}
 
/* 裏面の表示 */
a:hover .card_surface {
    transform:rotateY(90deg);
    transition: transform 300ms;
}
a:hover .card_reverse {
    transform:rotateY(0deg);
    transition: transform 300ms 150ms;
}

これで問題ないかと思ったのですが、裏面から表面に切り替わる時に少し違和感があるような感じがします。
カードが回転する動きのデモページ1
　

画像が切り替わるときに少しフェードするようにしてみます。

CSS

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.card {
    position: relative;
    width: 250px;
}
.card a {
    display: block;
}
.card_reverse {
    position: absolute;
    top: 0;
    left: 0;
}
 
/* 表面の表示 */
.card_surface {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
.card_reverse {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
 
/* 裏面の表示 */
a:hover .card_surface {
    opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
a:hover .card_reverse {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}

これでそれっぽい動きが実装できました。
カードが回転する動きのデモページ2
　

先ほどはオンマウスで画像を切り替えられるようにしましたが、classの付け替えで切り替えられるようにしてみます。

HTML

1
2
3
4
5
<div class="card is-surface">
    <img src="surface.jpg" alt="" class="card_surface" />
    <img src="reverse.jpg" alt="" class="card_reverse" />
</div>
<button id="switch">切り替え</button>

CSS

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.card {
    position: relative;
    width: 250px;
}
.card_reverse {
    position: absolute;
    top: 0;
    left: 0;
}
 
/* 表面の表示 */
.is-surface .card_surface {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
.is-surface .card_reverse {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
 
/* 裏面の表示 */
.is-reverse .card_surface {
    opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
.is-reverse .card_reverse {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}

JavaScript

1
2
3
4
5
$(function() {
    $('#switch').on('click', function() {
        $('.card').toggleClass('is-surface').toggleClass('is-reverse');
    });
});

ボタンをクリックすると画像が切り替わることが確認できました。
カードが回転する動きのデモページ3
　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930