2


2
3
4
5
6
7
数値を変更すれば効果とCSS出力がリアルタイムに変化します。
stay time (sec)
transition time (sec)
tilt
<!-- 2枚 -->
<figure class="slantwipe2">
<div><img src="./image/panel01.webp"></div>
<div><img src="./image/panel02.webp"></div>
</figure>
<!-- 3枚 -->
<figure class="slantwipe3">
<div><img src="./image/panel01.webp"></div>
<div><img src="./image/panel02.webp"></div>
<div><img src="./image/panel03.webp"></div>
</figure>
<!-- 4枚 -->
<figure class="slantwipe4">
<div><img src="./image/panel01.webp"></div>
<div><img src="./image/panel02.webp"></div>
<div><img src="./image/panel03.webp"></div>
<div><img src="./image/panel04.webp"></div>
</figure>
<!-- 5枚 -->
<figure class="slantwipe5">
<div><img src="./image/panel01.webp"></div>
<div><img src="./image/panel02.webp"></div>
<div><img src="./image/panel03.webp"></div>
<div><img src="./image/panel04.webp"></div>
<div><img src="./image/panel05.webp"></div>
</figure>
<!-- 6枚 -->
<figure class="slantwipe6">
<div><img src="./image/panel01.webp"></div>
<div><img src="./image/panel02.webp"></div>
<div><img src="./image/panel03.webp"></div>
<div><img src="./image/panel04.webp"></div>
<div><img src="./image/panel05.webp"></div>
<div><img src="./image/panel06.webp"></div>
</figure>
<!-- 7枚 -->
<figure class="slantwipe7">
<div><img src="./image/panel01.webp"></div>
<div><img src="./image/panel02.webp"></div>
<div><img src="./image/panel03.webp"></div>
<div><img src="./image/panel04.webp"></div>
<div><img src="./image/panel05.webp"></div>
<div><img src="./image/panel06.webp"></div>
<div><img src="./image/panel07.webp"></div>
</figure>
このページのQRコード
便利ウェブサイト
便利 Android アプリ
便利 iOS(iPhone,iPad) アプリ