() translation by (you can also view the original English article)
Dalam tutorial ini, saya akan menunjukkan cara membuat slideshow 3D hanya dengan menggunakan HTML dan CSS. Tidak perlu JavaScript! Jalankan Safari dan mari kita mulai!
Teori
Sebelum kita menyelami ke dalam pembangunan slideshow kita, penting untuk memahami pendekatan kita. Kita akan menggunakan transformasi 3D baru yang merupakan bagian dari spesifikasi CSS3. Anda mungkin pernah melihat tutorial lain tentang cara menggunakan transformasi ini untuk membangun objek dan menganimasikannya dalam ruang 3D. Biasanya saat membuat slideshow, kami mengandalkan JavaScript untuk memicu transformasi tersebut. JavaScript akan mendeteksi event klik dan memperbarui salah satu elemen HTML kami (biasanya dengan menambahkan kelas). Elemen yang diperbarui kemudian akan menerima gaya CSS baru.
Yang berbeda dari tutorial ini adalah kita akan memotong JavaScript dengan hanya menggunakan CSS untuk memicu event klik dan memperbarui gaya elemen kita. Tip Cepat Jeffrey Way terbaru, Meniru a Event Klik dengan CSS, menjelaskan cara melakukannya dengan menggunakan pseudoclass :target. Di sini, kita akan menggunakan pseudoclass :focus dan elemen HTML5 <figcaption>, tapi idenya tetap sama.
Metode ini belum tentu "lebih baik" daripada menggunakan JavaScript, tapi hanya alternatif yang rapi yang mengambil keuntungan dari elemen HTML5 terbaru.
Langkah 0: Memulai
Mari kita mulai dengan membuat index.html dan style.css. Kita juga akan membuat folder images.
Objek 3D kita akan menjadi kotak persegi panjang dengan empat wajah 940px dengan 400px dan dua wajah 400px dengan 400px Saya telah menyertakan enam gambar dalam file sumber. Tempatkan, atau versi Anda sendiri, di folder 'images'.
Langkah 1: HTML
Berikut adalah HTML dasar kita. Kita akan membungkus semuanya dengan sebuah container dan slideshow kita, secara alami, akan berada dalam elemen div yang disebut slideshow.
1 |
<!DOCTYPE HTML>
|
2 |
<html lang="en-US"> |
3 |
<head>
|
4 |
<meta charset="UTF-8"> |
5 |
<title>CSS 3D Slideshow</title> |
6 |
|
7 |
<link rel="stylesheet" type="text/css" href="style.css"/> |
8 |
|
9 |
</head>
|
10 |
|
11 |
<body>
|
12 |
<div id="container"> |
13 |
<div id="slideshow"> |
14 |
</div>
|
15 |
</div>
|
16 |
</body>
|
17 |
</html>
|
Dalam slideshow, tambahkan kode berikut untuk enam gambar kita:
1 |
<figure id="box"> |
2 |
<img src="images/face1.jpg"/> |
3 |
<img src="images/face2.jpg"/> |
4 |
<img src="images/face3.jpg"/> |
5 |
<img src="images/face4.jpg"/> |
6 |
<img src="images/face5.jpg"/> |
7 |
<img src="images/face6.jpg"/> |
8 |
</figure>
|
Perhatikan bahwa gambar kita (enam wajah objek 3D kita) dibungkus dalam sebuah <figure> dengan ID box. Elemen inilah yang akan kita putar saat menganimasikan slideshow kita.
Triknya
Kini muncul trik yang memungkinkan kita hanya menggunakan CSS untuk mendeteksi event klik. Kita akan membungkus box dengan enam elemen <figure> lainnya. Masing-masing akan mewakili rotasi yang berbeda dari objek 3D kita. Atribut tabindex memungkinkan elemen-elemen ini menerima pseudoclass :focus.
Setiap <figure> juga membutuhkan elemen <figcaption> di dalamnya. Teks ini akan berfungsi sebagai tombol kita. Saat diklik mereka akan memicu <figure> induk untuk menerima :focus. Itu akan memungkinkan kita untuk menggunakan enam transformasi CSS yang berbeda pada box.
Mungkin kedengarannya agak rumit sekarang, tapi akan masuk akal saat kita sampai di CSS. Untuk saat ini, cukup bungkus box dengan enam elemen <figure> dan berikan masing-masing tabindex dan ID yang unik. Kemudian sertakan <figcaption> untuk setiap <figure>.
HTML Akhir
Markup akhir di index.html akan terlihat seperti ini:
1 |
<!DOCTYPE HTML>
|
2 |
<html lang="en-US"> |
3 |
<head>
|
4 |
<meta charset="UTF-8"> |
5 |
<title>CSS 3D Slideshow</title> |
6 |
|
7 |
<link rel="stylesheet" type="text/css" href="style.css"/> |
8 |
|
9 |
</head>
|
10 |
|
11 |
<body>
|
12 |
<div id="container"> |
13 |
<div id="slideshow"> |
14 |
<figure tabindex=1 id="fig1"> |
15 |
<figcaption>Side 1</figcaption> |
16 |
<figure tabindex=2 id="fig2"> |
17 |
<figcaption>Side 2</figcaption> |
18 |
<figure tabindex=3 id="fig3"> |
19 |
<figcaption>Side 3</figcaption> |
20 |
<figure tabindex=4 id="fig4"> |
21 |
<figcaption>Side 4</figcaption> |
22 |
<figure tabindex=5 id="fig5"> |
23 |
<figcaption>Side 5</figcaption> |
24 |
<figure tabindex=6 id="fig6"> |
25 |
<figcaption>Side 6</figcaption> |
26 |
<figure id="box"> |
27 |
<img src="images/face1.jpg"/> |
28 |
<img src="images/face2.jpg"/> |
29 |
<img src="images/face3.jpg"/> |
30 |
<img src="images/face4.jpg"/> |
31 |
<img src="images/face5.jpg"/> |
32 |
<img src="images/face6.jpg"/> |
33 |
</figure>
|
34 |
</figure>
|
35 |
</figure>
|
36 |
</figure>
|
37 |
</figure>
|
38 |
</figure>
|
39 |
</figure>
|
40 |
</div> <!-- End Slideshow --> |
41 |
</div> <!-- End Container --> |
42 |
</body>
|
43 |
</html>
|
Langkah 2: CSS Dasar
Pertama, mari buka style.css dan sisipkan beberapa kode reset, hanya untuk pengukuran yang baik. (Menghilangkan garis tepi yang disebabkan :focus adalah penting.)
1 |
/* RESET */
|
2 |
html, body, div, span, applet, object, iframe, |
3 |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
4 |
a, abbr, acronym, address, big, cite, code, |
5 |
del, dfn, em, font, img, ins, kbd, q, s, samp, |
6 |
small, strike, strong, sub, sup, tt, var, |
7 |
b, u, i, center, |
8 |
dl, dt, dd, ol, ul, li, |
9 |
fieldset, form, label, legend, |
10 |
table, caption, tbody, tfoot, thead, tr, th, td { |
11 |
margin: 0; |
12 |
padding: 0; |
13 |
border: 0; |
14 |
outline: 0; |
15 |
font-size: 100%; |
16 |
vertical-align: baseline; |
17 |
background: transparent; |
18 |
}
|
19 |
body { |
20 |
line-height: 1; |
21 |
}
|
22 |
ol, ul { |
23 |
list-style: none; |
24 |
}
|
25 |
blockquote, q { |
26 |
quotes: none; |
27 |
}
|
28 |
blockquote:before, blockquote:after, |
29 |
q:before, q:after { |
30 |
content: ''; |
31 |
content: none; |
32 |
}
|
33 |
:focus { |
34 |
outline: 0; |
35 |
}
|
36 |
/* HTML5 tags */
|
37 |
header, section, footer, |
38 |
aside, nav, article { |
39 |
display: block; |
40 |
}
|
Selanjutnya, kita akan memberi halaman kita latar belakang gradien yang bagus:
1 |
html { |
2 |
width: 100%; |
3 |
height: 100%; |
4 |
background-color: #FFFFFF; |
5 |
background-image: -moz-linear-gradient(top, #FFFFFF, #b3b3b3); |
6 |
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #b3b3b3)); |
7 |
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3'); |
8 |
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3')"; |
9 |
}
|
Kode background-image mencakup awalan vendor Mozilla dan WebKit. Jika Anda ingin versi slideshow yang berfungsi dengan Internet Explorer, filter dan -ms-filter akan menciptakan gradien di IE6, 7 dan 8. (Saya membuat kode ini di situs yang berguna www.css3please.com.)
Sekarang, mari tambahkan beberapa kode untuk container, slideshow, dan box kita:
1 |
#container { |
2 |
width: 960px; |
3 |
margin: 0 auto; |
4 |
}
|
5 |
|
6 |
#slideshow { |
7 |
width: 900px; |
8 |
margin: 50px auto 0 auto; |
9 |
padding: 50px 0 0 0; |
10 |
}
|
11 |
|
12 |
figure { |
13 |
display: inline; |
14 |
}
|
15 |
|
16 |
#box { |
17 |
position: relative; |
18 |
display: block; |
19 |
width: 900px; |
20 |
height: 400px; |
21 |
}
|
Container kita akan memiliki lebar 960px dan ditengahkan dengan margin: 0 auto. Div slideshow akan menjadi lebar 900px, ditengah, dan didorong turun 50px dari atas halaman. Kita juga memberikan padding 50px di bagian atas. Area padding ini akan berisi tombol slideshow kita, elemen <figcaption>, begitu kita memposisikannya.
Elemen yang benar-benar berisi slideshow, box, diatur ke ukuran yang sama dengan gambar kita. Penting juga untuk menetapkan position menjadi relative karena kita akan benar-benar memposisikan beberapa anak mereka. <figure> kita yang lain akan ditetapkan ke display: inline, tapi box harus merupakan elemen block.
Sekarang, atur gaya berikut untuk enam gambar kita:
1 |
#box img { |
2 |
position: absolute; |
3 |
top: 0; |
4 |
left: 0; |
5 |
}
|
Kita memposisikan gambar kita dengan saksama sehingga mereka semua akan menumpuk langsung di atas satu sama lain di pojok kiri atas box. (Secara default, top dan left diatur ke 0. Ini sudah disertakan demi kejelasan.)
Sekarang, slideshow kita terlihat seperti ini:
Mari tambahkan beberapa penataan untuk tombol <figcaption> kita:
1 |
figcaption { |
2 |
display: inline-block; |
3 |
width: 70px; |
4 |
height: 35px; |
5 |
background: rgba(0,0,0,0.6); |
6 |
border: 1px solid rgba(0,0,0,0.7); |
7 |
-moz-border-radius: 20px; |
8 |
-webkit-border-radius: 20px; |
9 |
border-radius: 20px; |
10 |
text-align: center; |
11 |
line-height: 35px; |
12 |
color: #ffffff; |
13 |
text-shadow: 1px 1px 1px #000000; |
14 |
cursor: pointer; |
15 |
|
16 |
position: relative; |
17 |
top: -50px; |
18 |
left: 150px; |
19 |
margin: 0 30px 0 0; |
20 |
|
21 |
-moz-transition: all 0.1s linear; |
22 |
-o-transition: all 0.1s linear; |
23 |
-webkit-transition: all 0.1s linear; |
24 |
transition: all 0.1s linear; |
25 |
}
|
Bagian pertama dari gaya ini murni estetika. Itu membuat tombolnya semi transparan dan membulat dan teks ditengah dan memiliki bayangan. Ini juga mengubah kursor mouse menjadi pointer, sehingga pengguna tahu mereka bisa klik.
Bagian kedua menampilkan tombol di atas gambar, meletakkan di tengah, dan memberi ruang pada mereka.
Pastikan Anda memposisikan tombol di luar batas enam elemen
<figure>. Jika tidak, mengklik tombol akan benar-benar mendaftar sebagai klik pada<figure>paling dalam daripada yang sesuai dengan tombol itu.
Bit kode terakhir menambahkan transisi. Itu karena kita akan menambahkan penataan ke kondisi hover <figcaptions>:
1 |
figcaption:hover { |
2 |
background: rgba(0,0,0,0.8); |
3 |
}
|
Tombol dengan gaya kita akan terlihat seperti ini:
Langkah 3: Kotak 3D
Hal pertama yang perlu kita lakukan adalah memberitahu browser kita akan bekerja di ruang 3D. Kita melakukan ini dengan menggunakan properti perspective pada elemen induk. Mari kita menerapkannya (dengan awalan vendor WebKit) ke slideshow:
1 |
#slideshow { |
2 |
width: 900px; |
3 |
margin: 50px auto 0 auto; |
4 |
padding: 50px 0 0 0; |
5 |
-webkit-perspective: 800; /* triggers a 3D space */ |
6 |
}
|
Nilai perspective menentukan berapa banyak piksel "viewer" berasal dari objek 3D. Semakin rendah nilainya semakin berlebihan efek 3D-nya.
Kita juga perlu menjaga ruang 3D di seluruh elemen anak kita. Untuk melakukan ini, kita akan menambahkan properti transform-style: preserve-3d ke semua <figures> kita. (Sekali lagi, kita akan menggunakan awalan vendor WebKit.)
1 |
figure { |
2 |
display: inline; |
3 |
-webkit-transform-style: preserve-3d; /* maintains 3D space */ |
4 |
}
|
Baiklah, sekarang saatnya transform wajah individu (enam gambar kita) untuk membuat kotak 3D. Kita akan menargetkan setiap gambar menggunakan pseudoclass nth-child(), namun memberi masing-masing <img> sebuah ID khusus juga akan bekerja. Pastikan Anda menambahkan kode ini di bawah gaya saat ini di stylesheet.
Inilah kodenya, saya akan menjelaskannya di bawah ini:
1 |
#box img:nth-child(1) { |
2 |
-webkit-transform: rotateX(0deg) translateZ(200px); |
3 |
}
|
4 |
|
5 |
#box img:nth-child(2) { |
6 |
-webkit-transform: rotateX(180deg) translateZ(200px); |
7 |
}
|
8 |
|
9 |
#box img:nth-child(3) { |
10 |
-webkit-transform: rotateX(90deg) translateZ(200px); |
11 |
}
|
12 |
|
13 |
#box img:nth-child(4) { |
14 |
-webkit-transform: rotateX(-90deg) translateZ(200px); |
15 |
}
|
16 |
|
17 |
#box img:nth-child(5) { |
18 |
-webkit-transform: rotateY(-90deg) translateZ(200px); |
19 |
}
|
20 |
|
21 |
#box img:nth-child(6) { |
22 |
-webkit-transform: rotateY(90deg) translateZ(700px); |
23 |
}
|
Oke, jadi inilah yang terjadi: Gambar pertama tidak di-rotate sama sekali, tapi di-translate ke depan (ke arah pemirsa) 200 piksel pada sumbu Z-nya.
Gambar kedua di-rotate di sekitar sumbu X-nya 180 derajat sehingga menghadap menjauh dari pemirsa. Ini kemudian didorong menjauh dari pemirsa 200 piksel pada sumbu Z-nya.
Perhatikan bahwa urutan transformasi itu penting -- rotation mengubah asal benda dan kemudian translation terjadi di sepanjang sumbu baru.
Gambar ketiga dan keempat masing-masing di-rotate di sekitar sumbu X untuk menghadap ke atas dan ke bawah. Kemudian keduanya di-translate 200 piksel di sepanjang sumbu Z baru mereka.
Ingat, box kita lebar 900px dengan 400px dengan kedalaman 400px. Keempat sisi (wajah 940px dengan 400px) harus berjarak 400 piksel dari satu sama lain. Itu sebabnya kita translate semuanya 200 piksel ke arah yang berlawanan. Kedua ujungnya (wajah 400px dengan 400px) kita akan translate 900 piksel dari satu sama lain.
Gambar kelima dan keenam saat ini berada di sisi kiri box dan tidak di tengah. Karena itu, gambar kelima dan keenam kita menerima translate yang berbeda. Mereka berdua memiliki asal mereka 200 piksel di sebelah kanan ujung kiri box. Gambar kelima harus di-rotate -90 derajat di sekitar sumbu Y menghadap ke kiri dan kemudian di-translate 200 piksel di sepanjang sumbu Z baru. Ini menempatkannya di ujung kiri objek 3D kita. Gambar keenam di-rotate 90 derajat di sekitar sumbu Y agar menghadap ke kanan dan kemudian di-translate 700 piksel di sepanjang sumbu Z yang baru. Ini menempatkannya di ujung kanan objek 3D kita.
Cara terbaik untuk memahami apa yang telah kita lakukan adalah melihat susunan gambar saat ini. Jika Anda melihat pratinjau slideshow di Safari, Anda saat ini akan melihat ini:
Mari kita sembunyikan wajah depan -- supaya kita bisa melihat apakah gambar kita yang lain diposisikan dengan benar:
1 |
#box img:nth-child(1) { |
2 |
-webkit-transform: rotateX(0deg) translateZ(200px); |
3 |
display: none; /* temporarily hide */ |
4 |
}
|
Sekarang kita bisa melihat bagian dalam kotak kita:
Sekarang, hapus display: none dari gambar pertama kita. Anda mungkin telah memperhatikan bahwa kotak itu lebih besar di layar -- lebih dekat ke pemirsa -- daripada seharusnya. Wajah depan terutama terlihat terlalu besar dan membentang.
Untuk memperbaiki hal ini, kita perlu menjauhkan keseluruhan objek 3D dari pemirsa dengan 200 piksel. Tambahkan -webkit-transform: translateZ(-200px) ke gaya untuk box. Sementara kita berada di itu kita juga harus menambahkan properti transition:
1 |
#box { |
2 |
position: relative; |
3 |
display: block; |
4 |
width: 900px; |
5 |
height: 400px; |
6 |
-webkit-transform: translateZ(-200px); /* Pushes 3D object back into place */ |
7 |
-webkit-transition: -webkit-transform 1s; /* Enables transitions for transforms */ |
8 |
}
|
Dengan semua itu, kita siap untuk menganimasikan kotak kita.
Langkah 4: Animasi
Tempelkan di blok akhir penataan kita. Ini akan menambahkan animasi kita. Saya akan menjelaskan secara lebih rinci di bawah ini.
1 |
#fig1:focus #box { |
2 |
-webkit-transform: translateZ(-200px) rotateY(0deg); |
3 |
}
|
4 |
|
5 |
#fig2:focus #box { |
6 |
-webkit-transform: translateZ(-200px) rotateX(-180deg); |
7 |
}
|
8 |
|
9 |
#fig3:focus #box { |
10 |
-webkit-transform: translateZ(-200px) rotateX(-90deg); |
11 |
}
|
12 |
|
13 |
#fig4:focus #box { |
14 |
-webkit-transform: translateZ(-200px) rotateX(90deg); |
15 |
}
|
16 |
|
17 |
#fig5:focus #box { |
18 |
-webkit-transform: translateZ(-450px) rotateY(90deg); |
19 |
}
|
20 |
|
21 |
#fig6:focus #box { |
22 |
-webkit-transform: translateZ(-450px) rotateY(-90deg); |
23 |
}
|
Bila masing-masing elemen <figure> kita menerima pseudoclass :focus kita rotate box untuk menampilkan sisi yang benar. Perhatikan bahwa rotasi box berlawanan dengan rotasi yang kita gunakan pada setiap wajah individu. Misalnya, gambar keempat di-rotate negatif 90 derajat di sekitar sumbu X. Untuk membawanya ke tampilannya kita harus rotate seluruh objek 3D positif 90 derajat di sekitar sumbu X. Translate memastikan bahwa sisi objek 3D yang kita lihat selalu di jarak yang benar.
Itu saja! Periksa slideshow di Safari untuk memastikan semuanya bekerja.
CSS Akhir
Gaya akhir dalam style.css akan terlihat seperti ini:
1 |
/* RESET */
|
2 |
html, body, div, span, applet, object, iframe, |
3 |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
4 |
a, abbr, acronym, address, big, cite, code, |
5 |
del, dfn, em, font, img, ins, kbd, q, s, samp, |
6 |
small, strike, strong, sub, sup, tt, var, |
7 |
b, u, i, center, |
8 |
dl, dt, dd, ol, ul, li, |
9 |
fieldset, form, label, legend, |
10 |
table, caption, tbody, tfoot, thead, tr, th, td { |
11 |
margin: 0; |
12 |
padding: 0; |
13 |
border: 0; |
14 |
outline: 0; |
15 |
font-size: 100%; |
16 |
vertical-align: baseline; |
17 |
background: transparent; |
18 |
}
|
19 |
body { |
20 |
line-height: 1; |
21 |
}
|
22 |
ol, ul { |
23 |
list-style: none; |
24 |
}
|
25 |
blockquote, q { |
26 |
quotes: none; |
27 |
}
|
28 |
blockquote:before, blockquote:after, |
29 |
q:before, q:after { |
30 |
content: ''; |
31 |
content: none; |
32 |
}
|
33 |
:focus { |
34 |
outline: 0; |
35 |
}
|
36 |
/* HTML5 tags */
|
37 |
header, section, footer, |
38 |
aside, nav, article { |
39 |
display: block; |
40 |
}
|
41 |
|
42 |
html { |
43 |
width: 100%; |
44 |
height: 100%; |
45 |
background-color: #FFFFFF; |
46 |
background-image: -moz-linear-gradient(top, #FFFFFF, #b3b3b3); |
47 |
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #b3b3b3)); |
48 |
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3'); |
49 |
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3')"; |
50 |
}
|
51 |
|
52 |
#container { |
53 |
width: 960px; |
54 |
margin: 0 auto; |
55 |
}
|
56 |
|
57 |
#slideshow { |
58 |
width: 900px; |
59 |
margin: 50px auto 0 auto; |
60 |
padding: 50px 0 0 0; |
61 |
-webkit-perspective: 800; /* triggers a 3D space */ |
62 |
}
|
63 |
|
64 |
figure { |
65 |
display: inline; |
66 |
-webkit-transform-style: preserve-3d; /* maintains 3D space */ |
67 |
}
|
68 |
|
69 |
#box { |
70 |
position: relative; |
71 |
display: block; |
72 |
width: 900px; |
73 |
height: 400px; |
74 |
-webkit-transform: translateZ(-200px); /* Pushes 3D object back into place */ |
75 |
-webkit-transition: -webkit-transform 1s; /* Enables transitions for transforms */ |
76 |
}
|
77 |
|
78 |
#box img { |
79 |
position: absolute; |
80 |
top: 0; |
81 |
left: 0; |
82 |
}
|
83 |
|
84 |
figcaption { |
85 |
display: inline-block; |
86 |
width: 70px; |
87 |
height: 35px; |
88 |
background: rgba(0,0,0,0.6); |
89 |
border: 1px solid rgba(0,0,0,0.7); |
90 |
-moz-border-radius: 20px; |
91 |
-webkit-border-radius: 20px; |
92 |
border-radius: 20px; |
93 |
text-align: center; |
94 |
line-height: 35px; |
95 |
color: #ffffff; |
96 |
text-shadow: 1px 1px 1px #000000; |
97 |
cursor: pointer; |
98 |
|
99 |
position: relative; |
100 |
top: -50px; |
101 |
left: 150px; |
102 |
margin: 0 30px 0 0; |
103 |
|
104 |
-moz-transition: all 0.1s linear; |
105 |
-o-transition: all 0.1s linear; |
106 |
-webkit-transition: all 0.1s linear; |
107 |
transition: all 0.1s linear; |
108 |
}
|
109 |
|
110 |
figcaption:hover { |
111 |
background: rgba(0,0,0,0.8); |
112 |
}
|
113 |
|
114 |
#box img:nth-child(1) { |
115 |
-webkit-transform: rotateX(0deg) translateZ(200px); |
116 |
}
|
117 |
|
118 |
#box img:nth-child(2) { |
119 |
-webkit-transform: rotateX(180deg) translateZ(200px); |
120 |
}
|
121 |
|
122 |
#box img:nth-child(3) { |
123 |
-webkit-transform: rotateX(90deg) translateZ(200px); |
124 |
}
|
125 |
|
126 |
#box img:nth-child(4) { |
127 |
-webkit-transform: rotateX(-90deg) translateZ(200px); |
128 |
}
|
129 |
|
130 |
#box img:nth-child(5) { |
131 |
-webkit-transform: rotateY(-90deg) translateZ(200px); |
132 |
}
|
133 |
|
134 |
#box img:nth-child(6) { |
135 |
-webkit-transform: rotateY(90deg) translateZ(700px); |
136 |
}
|
137 |
|
138 |
#fig1:focus #box { |
139 |
-webkit-transform: translateZ(-200px) rotateY(0deg); |
140 |
}
|
141 |
|
142 |
#fig2:focus #box { |
143 |
-webkit-transform: translateZ(-200px) rotateX(-180deg); |
144 |
}
|
145 |
|
146 |
#fig3:focus #box { |
147 |
-webkit-transform: translateZ(-200px) rotateX(-90deg); |
148 |
}
|
149 |
|
150 |
#fig4:focus #box { |
151 |
-webkit-transform: translateZ(-200px) rotateX(90deg); |
152 |
}
|
153 |
|
154 |
#fig5:focus #box { |
155 |
-webkit-transform: translateZ(-450px) rotateY(90deg); |
156 |
}
|
157 |
|
158 |
#fig6:focus #box { |
159 |
-webkit-transform: translateZ(-450px) rotateY(-90deg); |
160 |
}
|
Pemikiran Akhir
Mungkin tidak ada cara untuk membenarkan penggunaan sekelompok elemen <figure> dan <figcaption> bersarang sebagai tombol di bawah rekomendasi CSS3 saat ini. Eksperimen ini juga tidak menghargai perbedaan HTML untuk konten, CSS untuk gaya, dan JS untuk perilaku. Dan karena perubahan ini saat ini hanya bekerja di Safari, slideshow ini sama sekali tidak siap untuk digunakan dalam proyek klien. Namun, tujuan dari eksperimen ini adalah untuk menampilkan dan mendorong batasan fitur HTML5 dan CSS3 yang baru.
Jika Anda tertarik untuk menyesuaikan slideshow ini untuk browser yang kurang mendapat dukungan, berikut beberapa tips bermanfaatnya:
- Gunakan Modernizr. Serius!
- Safari hanya mendukung transformasi 3D tapi Anda bisa membuat slideshow bagus menggunakan transformasi 2D dan mendukung jangkauan browser yang jauh lebih luas.
- Properti
opacityakan membuat slideshow memudar hebat dan bekerja di hampir setiap browser. (Anda butuhfilteruntuk IE). - Tombol
<figcaption>akan rusak di Firefox jika diposisikan absolut. Aneh sekali, saya tahu. Pastikan Anda menggunakan posisi relatif.
Saya harap Anda semua menikmati tutorial ini. Saya menantikan komentar Anda dan terima kasih banyak telah membaca!
