Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan sifat transformasi berbilang pada elemen menggunakan CSS?

Bagaimana untuk menggunakan sifat transformasi berbilang pada elemen menggunakan CSS?

WBOYke hadapan: 2023-09-02 11:17:021316semak imbas

如何使用 CSS 将多个变换属性应用于元素？

Salah satu ciri CSS yang paling berkuasa ialah keupayaan untuk menggunakan berbilang transformasi pada elemen, yang boleh digunakan untuk mencipta kesan visual dan animasi yang menakjubkan. Dalam artikel ini, kami akan membincangkan cara menggunakan sifat transformasi berbilang pada elemen menggunakan CSS dan memberikan contoh cara memanfaatkan teknik ini untuk meningkatkan pengalaman pengguna tapak web anda.

Kami akan merangkumi sintaks asas sifat transformasi, serta teknik yang lebih maju seperti transformasi bersarang dan menggunakan pelbagai transformasi untuk mencipta animasi yang kompleks. Sama ada anda seorang pemula atau pembangun web yang berpengalaman, artikel ini akan memberikan anda pengetahuan dan kemahiran yang anda perlukan untuk membawa kemahiran CSS anda ke peringkat seterusnya.

Css Transform property

CSS transform Sifat membolehkan pembangun menggunakan pelbagai transformasi pada elemen HTML, seperti penskalaan, putaran, condong dan terjemahan. transform Sifat sangat serba boleh dan membolehkan reka bentuk kreatif dan dinamik pada halaman web.

tatabahasa

element{
   transform: rotate() | scale() | skew() | translate();
}

Contoh

Mari kita ambil contoh memutarkan elemen HTML menggunakan atribut transform. Untuk memutar elemen, kami menggunakan fungsi rotate, yang mengambil nilai sudut (dalam darjah) sebagai hujahnya. Berikut adalah contoh -

<html>
   <div class="rotate"> Column </div>
   <style>
      .rotate {
         background-color: orange;
         margin: 30px;
         width: 70px;
         height: 90px;
         transform: rotate(45deg);
      }
   </style>
</html>

Gunakan dua sifat transformasi kepada satu elemen

Untuk menggunakan berbilang sifat transformasi pada elemen, anda hanya masukkan setiap sifat transformasi yang anda mahu gunakan dalam peraturan CSS yang sama, dipisahkan dengan ruang.

Contoh

Sebagai contoh, katakan anda mahu menggunakan kesan putaran dan penskalaan pada elemen. Mari kita lihat.

<html>
<head>
   <style>
      .rotate {
         background-color: orange;
         margin: 50px;
         width: 70px;
         height: 60px;
         text-align: center;
         letter-spacing: 1px;
      }
      .rotate:hover {
         transform: rotate(65deg) scale(1.5);
      }
   </style>
</head>
<body>
   <h1>CSS Transform Properties</h1>
   <h3>Given below is a div element which is rotated by 65deg as well as scaled up by 1.5 on hovering.</h3>
   <div class="rotate"> Column </div>
</body>
</html>

Dalam contoh di atas, pemilih .rotate mencari elemen yang akan diubah, dan atribut transform mengandungi kedua-dua rotate#🎜🎜 # dan ZumFungsi dipisahkan oleh ruang. Fungsi

putar menggunakan putaran 65 darjah pada elemen, manakala fungsi skala menskalakan elemen kepada 150% daripada saiz asalnya. Transform properties digunakan apabila anda menuding pada elemen.

Gunakan berbilang sifat transformasi pada elemen

Sintaks singkatan membolehkan anda memasukkan berbilang fungsi transformasi dalam satu atribut

transform dengan memisahkannya dengan koma.

Contoh

Ini adalah contoh. Di sini, fungsi

rotate menggunakan putaran 65 darjah pada elemen, manakala fungsi skala menskalakan elemen kepada 150% daripada saiz asalnya. terjemah Fungsi menggerakkan elemen 40 piksel ke kanan dan 35 piksel ke bawah daripada kedudukan asalnya. Transform properties digunakan apabila anda menuding pada elemen.

<html>
<head>
   <style>
      .rotate {
         background-color: yellow;
         margin-left: 80px;
         width: 70px;
         height: 60px;
         text-align: center;
         letter-spacing: 1px;
      }
      .rotate:hover {
         transform: rotate(65deg) scale(1.5) translate(40px, 35px);
      }
   </style>
</head>
<body>
   <h1>CSS Transform Properties</h1>
   <h3>Given below is a div element which is rotated by 65deg as well as scaled up 150 times on hovering. Also, it translates by 40px and 35px.</h3>
   <div class="rotate"> Column </div>
</body>
</html>

Gunakan pelbagai transformasi

Mari buat animasi yang membalikkan kad untuk menunjukkan belakangnya apabila diklik. Anda boleh mencapai ini dengan menggunakan berbilang perubahan dalam CSS bersama-sama dengan beberapa animasi bingkai utama.

Contoh

<html>
<head>
   <style>
      .card {
         width: 200px;
         height: 300px;
         position: relative;
         transform-style: preserve-3d;
         transition: all 0.6s ease-in-out;
      }
      .card .front {
         position: absolute;
         width: 100%;
         height: 100%;
         backface-visibility: hidden;
         background-color: #FFFDD0;
      }
      .card .back {
         position: absolute;
         width: 100%;
         height: 100%;
         backface-visibility: hidden;
         background-color: #FFDEAD;
         transform: rotateY(180deg);
      }
      .card:hover {
         transform: rotateY(180deg);
      }
      .card:active {
         transform: rotateY(180deg) scale(0.8);
      }

      @keyframes flip {
         from {
            transform: rotateY(0deg);
         }

         to {
            transform: rotateY(180deg);
         }
      }
      @keyframes shrink {
         from {
            transform: rotateY(180deg) scale(1);
         }
         to {
            transform: rotateY(180deg) scale(0.8);
         }
      }
      .card:active {
         animation: flip 0.6s ease-in-out, shrink 0.6s ease-in-out;
      }      
   </style>
</head>
<body>   
   <div class="card">
      <div class="front">
         <h2> Front Side </h2>
         <p> Hello World!! This is the front side of the card. Hover on me to see the back side. </p>
      </div>
      <div class="back">
         <h2> Back Side </h2>
         <p> Hello World!! This is the back side of the card. </p>
      </div>
   </div>
</body> 
</html>

Apabila kad hadapan dilegar, kita boleh melihat bahagian belakang kad tersebut.

Kad ialah bekas yang mengandungi dua elemen kanak-kanak,

.depan dan .belakang, yang masing-masing mewakili bahagian hadapan dan belakang kad. Elemen .depan dan .belakang diletakkan secara mutlak di dalam bekas .card dan keterlihatan muka belakang# mereka 🎜 🎜#Properties ditetapkan kepada hidden untuk mengelakkannya daripada kelihatan apabila berhadapan dengan pengguna.

Animasi
Flip
akan membuatkan kad berputar 180 darjah dalam masa 0.6 saat, mengecut animasi akan menjadikan kad mengecut kepada 80% yang sama tempoh masa saiz asal.

Dalam artikel ini, kami mengetahui bahawa menggunakan sifat transformasi berbilang menggunakan CSS ialah cara mudah untuk mencipta animasi kompleks dan kesan elemen HTML. Menggunakan atribut

transform

, anda boleh menggunakan pelbagai transformasi, seperti penskalaan, putaran, kecondongan dan terjemahan, pada mana-mana elemen HTML pada halaman web anda. Dengan menggabungkan berbilang sifat transformasi, anda boleh mencipta reka bentuk yang lebih dinamik dan menarik.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan sifat transformasi berbilang pada elemen menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html 选择器 transform

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Penggunaan peraturan CSS @charsetArtikel seterusnya：Penggunaan peraturan CSS @charset

Artikel berkaitan

Lihat lagi