純粋な CSS3 クールなフルスクリーン 3D キューブ回転表示スライド効果_html/css_WEB-ITnose

これは、非常にクールな純粋な CSS3 フルスクリーン 3D キューブ回転表示スライドショー効果です。このスライドでは、スライドのキャリアとしてフルスクリーンの 3D キューブを使用しており、上下のナビゲーション ボタンを使用してキューブを垂直に回転させ、キューブの両側にスライド画像を表示できます。

オンライン プレビュー ソース コードのダウンロード

使用方法

HTML 構造

このスライドの立方体構造は順序なしリストを使用して作成されており、各

要素は立方体面です。スライドの上下のナビゲーション ボタンは、ラジオ ラジオ ボタンとラベルを使用して作成されます。 3D キューブ スライドショー全体が div コンテナーにラップされます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

< div class = "ボタンラッパー" >

< 入力 ID = "スライド 1" タイプ = "ラジオ" 名前 = "スライダー" チェック済み> I & lt; 入力 ID = "スライド 4" タイプ = "ラジオ" 名前 = "スライダー" & GT; v クラス = "キャプション" >

div >

& lt ; = のラベルslide2" >

< = "slide3" のラベル >

< = "slide4" のラベル >

< / div >

CSS スタイル

デモ内の画像を独自の画像に置き換えたい場合は、skin.min.css で次のコードを見つけて、画像のアドレスを変更します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

body .buttons-wrapper .slider > li:nth-child( 1 ) {

背景 : url ( 1 .jpg) リピートなし 中央 中央 ;

}

body .buttons-wrapper .slider > li:nth-child( 2 ) {

背景 : url ( 2 .jpg) リピートなし 中央 中央 ;

}

body .buttons-wrapper .slider > li:nth-child( 3 ) {

背景 : url ( 3 .jpg) リピートなし 中央 中央 ;

}

body .buttons-wrapper .slider > li:nth-child( 4 ) {

背景 : url ( 4 .jpg) リピートなし 中央 中央 ;

}