Pertanyaan yang diberi tag «css-transforms»

Dengan menggunakan CSS, bagaimana saya bisa menerapkan lebih dari satu transform? Contoh: Berikut ini, hanya terjemahan yang diterapkan, bukan rotasi. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

605 css  css-transforms 

Saya memiliki situasi di mana, dalam keadaan CSS normal, div tetap akan diposisikan tepat di tempat yang ditentukan ( top:0px, left:0px). Ini tampaknya tidak dihargai jika saya memiliki orang tua yang memiliki transformasi translate3d. Apakah saya tidak melihat sesuatu? Saya telah mencoba webkit lain seperti gaya dan mengubah opsi asal …

142 html  css  css-position  css-transforms 

Katakanlah saya memiliki beberapa kolom, yang beberapa di antaranya ingin saya putar nilainya: http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div> Dengan CSS ini: .statusColumn b { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; } Hasilnya akan terlihat seperti ini: …

119 css  css-transforms 

Saya mengalami masalah saat memutar dan memposisikan baris teks. Sekarang hanya posisi yang berhasil. Rotasi juga berfungsi, tetapi hanya jika saya menonaktifkan pemosisian. CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } Html hanyalah teks biasa.

89 css  webkit  transform  css-transforms 

Saya mencoba membuat animasi gaya roller coaster dengan CSS. Saya ingin tahu bagaimana cara melengkung "coaster" ketika itu dalam tahap loop. Saya sedang mencari solusi semua CSS tetapi jika perlu sedikit JavaScript saya setuju dengan itu. kode saya sejauh ini: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; …

15 html  css  css-animations  css-transforms