Kod CSS3
.perspective {
-webkit-perspective: 800px;
perspective: 800px;
}
.cube {
display: block;
width: 200px;
height: 200px;
margin: 40px;
float: left;
background: rgba(0,0,0, 0.1);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
-moz-transform: rotateX(0) rotateY(0) rotateZ(0);
-ms-transform: rotateX(0) rotateY(0) rotateZ(0);
-o-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
.front {
width: 200px;
height: 200px;
position: absolute;
-webkit-backface-visibility: visible;
-webkit-transform: translateZ(100px);
backface-visibility: visible;
transform: translateZ(100px);
}
.back {
width: 200px;
height: 200px;
position: absolute;
-webkit-backface-visibility: visible;
-webkit-transform: rotateY(180deg) translateZ(100px);
backface-visibility: visible;
transform: rotateY(180deg) translateZ(100px);
}
#cubeY {
-webkit-animation: rotatecubeY 5s infinite linear;
animation: rotatecubeY 5s infinite linear;
}
@-webkit-keyframes rotatecubeY {
0% { -webkit-transform: rotateY(0); }
100% { -webkit-transform: rotateY(360deg); }
}
@keyframes rotatecubeY {
0% { transform: rotateY(0); }
100% { transform: rotateY(360deg); }
}
#cubeX {
-webkit-animation: rotatecubeX 5s infinite linear;
animation: rotatecubeX 5s infinite linear;
}
@-webkit-keyframes rotatecubeX {
0% { -webkit-transform: rotateX(0); }
100% { -webkit-transform: rotateX(360deg); }
}
@keyframes rotatecubeX {
0% { transform: rotateX(0); }
100% { transform: rotateX(360deg); }
}
#cubeZ {
-webkit-animation: rotatecubeZ 5s infinite linear;
animation: rotatecubeZ 5s infinite linear;
}
@-webkit-keyframes rotatecubeZ {
0% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(360deg); }
}
@keyframes rotatecubeZ {
0% { transform: rotateZ(0); }
100% { transform: rotateZ(360deg); }
}
Kod HTML
‹div class="perspective"›
‹div class="cube" id="cubeY"›
‹img src="css3.png" class="front" alt="css"›
‹img src="html5.png" class="back" alt="html"›
‹/div›
‹/div›
‹div class="perspective"›
‹div class="cube" id="cubeX"›
‹img src="css3.png" class="front" alt="css"›
‹img src="html5.png" class="back" alt="html"›
‹/div›
‹/div›
‹div class="perspective"›
‹div class="cube" id="cubeZ"›
‹img src="css3.png" class="front" alt="css"›
‹img src="html5.png" class="back" alt="html"›
‹/div›
‹/div›
Poniżej znajduje się efekt dość nietypowej nawigacji na stronie (menu podstron) polega on na tzw "odwracaniu" zawartości. Wykonanie jest banalnie proste i wymaga jedynie kilku styli CSS oraz struktury menu w HTML.
W dzisiejszych czasach oraz dostępnych łączach internetowych... raczej zbędne, ale na pewno zaciekawi :) Zastosować można np przy wczytywaniu jakiegoś "naprawdę sporego" zdjęcia, lub całej strony. Pre-loader podczas…
Czasami zachodzi konieczność wstawienia znaku "specjalnego" w łańcuchu. Przykładowo "enter" czyli chr(13), lub potrzebujemy wygenerować pseudolosowy ciąg znaków [a-z] czyli od chr(97) do chr(122), kto by…
Poniżej znajduje się efekt "koloryzacji" zdjęcia po najechaniu na nie myszką. Efekt ten został uzyskany jedynie za pomocą styli CSS. Zaledwie kilka linijek kodu CSS ożywi nam obraz całej strony, a przy tym bez…
Niejednokrotnie można zauważyć że na stronach internetowych przyciski wraz z ikonką zmieniają np swój kolor, są obracane lub powiększane bez utraty swojej jakości. Jak to jest możliwe? Ikonki te nie są...
FlatDesign - Płaskie jest ładne! Jeszcze do niedawna bardzo modne było wykonywanie elementów graficznych strony tak aby naśladowały rzeczywiste obiekty (np. trójwymiarowe przyciski). Aktualnie ustępuje to miejsca prezentacji…
Jeśli chce się zmienić wygląd jakiegoś elementu HTML, trzeba wskazać - którego. Do tego właśnie służą selektory. Jest wiele różnych selektorów, można stosować ich kombinacje - wszystko po to, aby dało się…
Jeszcze do niedawna rozpoczęcie prac nad wykonaniem strony internetowej polegało wpierw na wykonaniu projektu graficznego. Następnie projekt ten był cięty na kawałki i w formie tabelki wyświetlany na stronie.