hujung hadapan web
tutorial css
Bagaimana untuk menetapkan kedudukan asas unsur yang diputar dalam CSS?
Bagaimana untuk menetapkan kedudukan asas unsur yang diputar dalam 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>
在这里，"sudut" 是以度为单位指定要应用于元素的旋转量。
Sebagai contoh, kod berikut akan memutarkan elemen sebanyak 30 darjah −
.rotate {
transform: rotate(30deg);
}
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.
.placed {
transform-origin: top left;
transform: rotate(30deg);
}
示例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>
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>
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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Bagaimana anda menggunakan CSS untuk membuat kesan teks, seperti bayang -bayang teks dan kecerunan?
Mar 14, 2025 am 11:10 AM
Artikel ini membincangkan menggunakan CSS untuk kesan teks seperti bayang -bayang dan kecerunan, mengoptimumkannya untuk prestasi, dan meningkatkan pengalaman pengguna. Ia juga menyenaraikan sumber untuk pemula. (159 aksara)
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
