W tym artykule zrozumiemy Transform In szczegółowo i uzupełnij szczegółową praktyczną demonstrację. Poniższe wskazówki zostaną omówione w tym artykule,
Wraz z rozwojem funkcjonalności serwisu, równie ważne jest zapewnienie sprytnych integracji na swojej stronie, aby była atrakcyjna i lepsza. Dodanie różnych elementów CSS, które uzupełniają Twoją witrynę, to potrzeba godziny.
Ludzie trzymają się z dala od witryn, które tak naprawdę nie są atrakcyjne dla mas. A co powiesz na próbę przekształcenia niektórych elementów i upiększenia CSS za pomocą mniejszej wartości kompresji.
Aby spełnić podobne potrzeby, mamy właściwość transform CSS, która przekształca elementy poprzez pochylanie, obracanie, skalowanie lub translację.
Przechodząc do tego artykułu na temat Transform w CSS
Co to jest transform CSS?
Przekształcenie elementu CSS oznacza nadanie mu krawędzi w formie 2D lub 3D. Wizualnie zmienia stylizację elementu.
Transformacja 2D działa na osiach X i Y. Możesz podać dowolną krawędź lub strukturę na obu osiach, aby wprowadzić zmiany. Podczas transformacji 3D musi działać na osiach X, Y i Z, aby zapewnić wymaganą głębokość.
Właściwości przekształcenia CSS 2D:
| Funkcjonować | Opis |
matryca( n, n, n, n, n, n ) | Macierz sześciu wartości |
Tłumaczyć( x, y ) | Umożliwia przesuwanie elementu wzdłuż osi X i Y. |
translateX ( n ) | Umożliwia przesuwanie elementu wzdłuż osi X. |
translateY ( n ) | Umożliwia przesuwanie elementu wzdłuż osi Y. jak podnieść liczbę do potęgi w java |
skala( x, y ) | Zmienia szerokość i wysokość elementów |
scaleX ( n ) | Zmienia szerokość elementu |
scaleY ( n ) | Zmienia wysokość elementów |
obracać się( kąt ) | Pozwala obrócić element o kąt określony w parametrze |
krzywy( kąt x, kąt y ) | Pochyla element wzdłuż osi X i Y. |
skewX ( kąt ) | Pochyla element wzdłuż osi X. |
skewY ( kąt ) | Pochyla element wzdłuż osi Y. |
Właściwości transformacji CSS 3D:
własność | Opis |
przekształcać | Stosuje transformację 2D lub 3D do elementu |
pochodzenie transformacji | Umożliwia zmianę pozycji na przekształconych elementach |
styl transformacji | Określa, w jaki sposób zagnieżdżone elementy są renderowane w przestrzeni 3D |
perspektywiczny | Określa perspektywę wyświetlania elementów 3D |
perspektywiczne pochodzenie | Określa dolne położenie elementów 3D jak wdrożyć aplikację java w aws |
widoczność z tyłu | Określa, czy element powinien być widoczny, gdy nie jest skierowany w stronę ekranu |
Na przykład:
css .element {width: 20px height: 20px transform: scale (20)}Teraz, gdy to zrobisz, zdefiniowany element zostanie przeskalowany 20 razy.
Nie tylko to, możesz także skalować według osi w celu skalowania poziomego i pionowego.
transform: scaleX (2) transform: scaleY (.5)
Aby zapewnić odpowiednią transformację we wszystkich przeglądarkach, możesz:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}Właściwość transform CSS poprawia przestrzeń współrzędnych poziomu wizualnego formatowania CSS.
Co to jest poziom formatowania wizualnego?
Poziom formatowania wizualnego oznacza przetwarzanie dokumentu i wizualną prezentację go na platformach medialnych. Dzięki formatowaniu wizualnemu możesz przekształcić każdy element jako model zgodny z modelem pudełkowym CSS. Model pudełkowy CSS definiuje element w standardowym formacie prostokątnego pudełka, definiując rozmiar, położenie i właściwości.
Uwaga: Transformować można tylko elementy podlegające transformacji.
Przechodząc do tego artykułu na temat Transform w CSS
Jakie są różne właściwości transformacji?
Spójrzmy na wszystkie właściwości przekształcające:
1. skala (): Skalowanie oznacza zmianę rozmiaru elementu w poziomie lub w pionie.
W przypadku skalowania w pionie:scaleX
W przypadku skalowania poziomego:scaleY
jak przekonwertować double na int java
W przypadku elementu możesz również zmienić rozmiar czcionki, dopełnienie, wysokość lub szerokość. Wartość domyślna to 1, co oznacza również podanie 0,5, ponieważ wartość zmniejsza ją o połowę, a 2 podwaja skalowanie.
2. pochylenie (): Właściwość Skew umożliwia użytkownikowi przechylenie elementu w prawo lub w lewo od jednego punktu współrzędnych. To prawie jak przekształcenie prostokąta w równoległobok. Możesz pochylić element według jego współrzędnych.
Przykład:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Gdy to zrobisz, element pochyli się o 25 stopni w poziomie i w pionie, używając skewX lub skewY.
3. obróć ( ) : Możesz obrócić element zgodnie z ruchem wskazówek zegara, używając tej właściwości. Możesz obrócić go o 180 stopni lub 360 stopni, aby przywrócić go do pierwotnego miejsca.
.element {transform: rotate (25deg)}Aby zapewnić również obrót, możesz użyć dowolnego z trzech wymiarów: rotateX, rotateY lub rotateZ.
4. przetłumacz ( ) : Możesz przesunąć element prawidłowo do góry nogami lub na boki.
.element {transform: translate (20px, 10px)}Translacja przesunie określony obiekt / element do góry nogami lub na boki. Pierwsza określona wartość przesuwa obiekt w prawo (ujemna przesuwa go w lewo), a druga wartość przesuwa go w dół (określenie ujemnej wartości przesuwa go w górę).
Jeśli to może cię zmylić, zastosuj oś X, aby zmienić położenie elementu w poziomie, a osie Y, aby zmienić położenie w pionie. Najbardziej niesamowitym aspektem właściwości transform jest to, że zastosowanie transformacji pozwoli tylko na ruch elementu, pozostawiając wszystkie pozostałe elementy lub tekst w stanie nienaruszonym. Odległość jest zwykle podawana w pikselach lub procentach.
Na przykład:
.element {transform: translateX (wartość) transform: translateY (wartość)}5. perspektywa (): Możesz podać głębię w perspektywie elementu. Pozwala nadać elementowi transformację 3D, czyniąc go sześciennym w transformacji.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
Wprowadzenie osi z daje elementowi wizualizację 3D. translateZ () przesuwa element w kierunku widza, podczas gdy wartość ujemna odsuwa go.
6. macierz () : Połącz wszystkie transformacje w jedną.
rotate (45deg) translate (24px, 25px)
Zastosowanie matrix () łączy wszystkie właściwości transformacji w jednej tablicy.
Zastosowanie właściwości transform może znacznie ulepszyć element, a tym samym atrakcyjność witryny. Spróbuj ich!
To prowadzi nas do końca tego artykułu o Transform In CSS.
Jeśli chcesz dowiedzieć się więcej o tworzeniu stron internetowych, zapoznaj się z przez Edureka. Szkolenie w zakresie certyfikacji w zakresie rozwoju sieci pomoże Ci nauczyć się, jak tworzyć imponujące witryny internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w usłudze Amazon Simple Storage Service (S3).
Jeśli nadal jesteś zainteresowany Jeśli masz jakieś pytanie, możesz zamieścić je w sekcji komentarzy tego bloga „Co to jest CSS”, a my skontaktujemy się z Tobą tak szybko, jak to możliwe.