Bagaimana untuk menetapkan kedudukan asas unsur yang diputar dalam CSS?-tutorial css-php.cn

Bagaimana untuk menetapkan kedudukan asas unsur yang diputar dalam CSS?

WBOY

Lepaskan： 2023-08-27 14:21:07

ke hadapan

1410 orang telah melayarinya

如何在 CSS 中设置旋转元素的基本位置？

CSS, atau Cascading Style Sheets, ialah alat berkuasa yang menyediakan pelbagai kesan untuk mencipta halaman web yang cantik dan dinamik. Salah satu alat yang paling penting dalam CSS ialah keupayaan untuk memutar elemen. Elemen berputar, cipta reka bentuk dan animasi unik yang menarik perhatian pengguna dan membantu menyampaikan mesej. Di sini, kami akan meneroka cara menetapkan peletakan asas elemen yang diputar dalam CSS.

CSS中的Transform属性

Harta Transform membolehkan anda menggunakan pelbagai transformasi pada elemen, termasuk putaran, penskalaan dan pencongan. Apabila transformasi digunakan pada elemen, lokasi asas elemen berubah, menjadikannya sukar untuk meletakkan elemen dengan betul.

Putar, skala, condong dan terjemah adalah sub-sifat bagi sifat transformasi. Di sini, kami akan menumpukan pada sub-harta yang diputar. Putar sifat membenarkan untuk memutarkan elemen di sekeliling titik tetap pada halaman.

在CSS中的元素旋转

Untuk memutar elemen dalam CSS, sifat transform digunakan dengan fungsi rotate().

Sintaks

<style>
   scc-selector{
      transform: rotate(angle);
   }
</style>

Salin selepas log masuk

在这里，"sudut" 是以度为单位指定要应用于元素的旋转量。

Sebagai contoh, kod berikut akan memutarkan elemen sebanyak 30 darjah −

.rotate {
   transform: rotate(30deg);
}

Salin selepas log masuk

Kedudukan elemen yang diputar dilaraskan mengikut sudut putaran. Ini boleh menyebabkan elemen beralih dari kedudukan asalnya, yang boleh menjadi masalah untuk mengekalkannya dengan betul.

CSS中可用的旋转变换类型

在CSS中有各种类型的旋转变换可用，如rotate()、rotateX()、rotateY()和rotateZ()。rotate()函数围绕的绕图rotateX()和rotateY()分别围绕元素的水平和垂直轴旋转。rotateZ()函数围绕元素的z轴旋转，该轴垂直于屏幕。

设置旋转元素的基础位置的重要性

Kedudukan asas elemen yang diputar menentukan di mana ia berlabuh berhubung dengan bekasnya. Secara lalai, peletakan asas ditetapkan ke tengah elemen. Walau bagaimanapun, peletakan asas boleh dilaraskan menggunakan sifat asal-ubah. Ini penting kerana ia boleh mempengaruhi cara elemen diletakkan pada halaman.
使用 transform-origin 属性来调整旋转元素的基本位置
Sifat asal-ubah boleh digunakan untuk melaraskan kedudukan asas unsur yang diputar. Sifat ini menentukan titik di sekeliling elemen diputar. Secara lalai, peletakan asas ialah pusat elemen, yang bermaksud elemen diputar di sekitar titik tengahnya.
Untuk melaraskan peletakan asas, kami boleh menetapkan sifat asal-ubah kepada nilai yang berbeza.

Kod berikut akan menetapkan peletakan asas ke sudut kiri atas elemen −

.placed {
   transform-origin: top left;
   transform: rotate(30deg);
}

Salin selepas log masuk

Mari kita lihat beberapa contoh menetapkan peletakan asas elemen yang diputar dalam CSS.

示例1：围绕其中心旋转一个正方形

在这个例子中，我们使用transform属性将正方形旋转30度，基准位置默认设置为中。

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .outer-line {
         position: relative;
         height: 200px;
         width: 200px;
         margin: auto;
         padding: 5px;
         border: 4px solid #fbf;
      }
      #box {
         width: 100px;
         height: 100px;
         background-color: red;
         transform: rotate(30deg);
      }
   </style>
</head>
   <body>
      <h3>The square is rotated by 30 degrees around its center point</h3>
      <div class="outer-line">
         <div id="box"></div>
      </div>
   </body>
</html>

Salin selepas log masuk

Contoh 2: Memutar elemen di sekeliling sudut kanan bawahnya

Dalam contoh ini, kami memutarkan segi empat sama sebanyak 30 darjah menggunakan sifat transformasi, dan kemudian menetapkan sifat asal transformasi ke kanan bawah.

<html>
<head>
   <style>
      body { text-align: center; }
      .outer-line {
         position: relative;
         height: 200px;
         width: 200px;
         margin: auto;
         padding: 5px;
         border: 4px solid #fbf;
      }
      #box {
         width: 100px; height: 100px;
         background-color: red;
         transform: rotate(30deg);
         transform-origin: bottom right;
         position: absolute;
         bottom: 50px;
         right: 50px;
      }
   </style>
</head>
   <body>
      <h3>The square is rotated by 30 degrees around its bottom-right corner</h3>
      <div class="outer-line">
         <div id="box"></div>
      </div>
   </body>
</html>

Salin selepas log masuk

Contoh 3: Animasi berputar yang mengubah peletakan asas elemen

Dalam contoh ini, kami mencipta segi empat sama dengan warna latar belakang merah dalam bekas dan menetapkan kedudukan awalnya menggunakan kedudukan: nilai mutlak, atas dan kiri. Kami juga menetapkan lebar dan ketinggiannya kepada 100px, dan kemudian menggunakan sifat animasi untuk menggunakan animasi bingkai utama yang dipanggil putar. Animasi ini berjalan selama 2 saat dan berulang tanpa had.

最后，这个动画创建了一个旋转效果，其中元素的基本位置从中心变为否，其中元素的基本位置从中心变为否，上上上最后又回到中心。

<html>
<head>
   <style>
      body { text-align: center; }
      .container {
         position: relative;
         height: 200px;
         width: 200px;
         margin: auto;
         padding: 5px;
         border: 4px solid #fbf;
      }
      .sqr {
         position: absolute;
         top: 50px;
         left: 50px;
         width: 100px;
         height: 100px;
         background-color: red;
         animation: rotate 2s infinite;
      }
      @keyframes rotate {
         0% {
            transform: rotate(0deg);
            transform-origin: center;
         }
         50% {
            transform: rotate(180deg);
            transform-origin: top left;
         }
         100% {
            transform: rotate(360deg);
            transform-origin: bottom right;
         }
      }
   </style>
</head>
   <body>
      <h3>Rotating animation that changes the element's base placement</h3>
      <div class="container">
         <div class="sqr"></div>
      </div>
   </body>
</html>

Salin selepas log masuk

Kesimpulan

在这里，我们讨论了如何使用CSS旋转元素。通过按照本文中给出的示例，我们们家在不同设备上的位置正确且一致。

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan asas unsur yang diputar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!