HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS
Colors RGB HEX HSL
Latar Belakang CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Batas CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Margin CSS
Margins Margin Collapse
Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Teks CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Font CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikon CSS Tautan CSS Daftar CSS Tabel CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float
Float Clear Float Examples
CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS
Navbar Vertical Navbar Horizontal Navbar
Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS
Linear Gradients Radial Gradients Conic Gradients
Bayangan CSS
Shadow Effects Box Shadow
Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Transformasi 3D CSS

❮ Sebelumnya Berikutnya ❯

Transformasi 3D CSS

CSS juga mendukung transformasi 3D.

Arahkan mouse ke elemen di bawah ini untuk melihat perbedaan antara transformasi 2D dan 3D:

Putaran 2D
Putar 3D

Dalam bab ini Anda akan belajar tentang properti CSS berikut:

  • transform

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

Metode Transformasi 3D CSS

Dengan properti CSS transformAnda dapat menggunakan metode transformasi 3D berikut:

  • rotateX()
  • rotateY()
  • rotateZ()

Metode rotateX()

Putar X

Metode rotateX()ini memutar elemen di sekitar sumbu X pada derajat tertentu:

Contoh

#myDiv {
  transform: rotateX(150deg);
}

Metode rotateY()

Putar Y

Metode rotateY()ini memutar elemen di sekitar sumbu Y pada derajat tertentu:

Contoh

#myDiv {
  transform: rotateY(150deg);
}

Metode rotateZ()

Metode rotateZ()ini memutar elemen di sekitar sumbu Z pada derajat tertentu:

Contoh

#myDiv {
  transform: rotateZ(90deg);
}

Uji Diri Anda Dengan Latihan

Olahraga:

Dengan transformproperti, putar elemen <div> 150deg di sekitar sumbu X-nya..

<style>
div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
  : ;
}
</style>

<body>
  <div>This is a div</div>
</body>

Properti Transformasi CSS

Tabel berikut mencantumkan semua properti transformasi 3D:

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
backface-visibility Defines whether or not an element should be visible when not facing the screen

Metode Transformasi 3D CSS

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)		 Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

❮ Sebelumnya Berikutnya ❯