Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

rotate - Tailwind


Doğuhan ELMA

84 views

 1.png

HTML:

<div class="min-h-screen bg-blue-500 p-8">
    <div class="relative mx-auto bg-white rounded-xl shadow-xl h-56 w-80">
        <div class="bg-amber-100 w-32 h-32 absolute -top-2 -right-2">
            <a class=" absolute bg-amber-300 block origin-bottom-right rotate-45 bottom-0 right-0">elmacademy.net</a>
        </div>
    </div>
</div>

 

Açıklama:

origin-bottom-right: 

origin-bottom-right sınıfı, Tailwind CSS'in dönüşüm özelliklerinden biridir ve bir öğenin dönme noktasını belirtir. Bu sınıf, öğenin dönme noktasını öğenin sağ alt köşesine yerleştirir.

Genellikle, transform-origin özelliğiyle birlikte kullanılır ve öğenin dönüşünü belirlerken dönme noktasını da belirler.

Tailwind CSS'de transform-origin özelliği, bir öğenin dönme noktasını belirlemek için kullanılır. Ancak, standart CSS'deki transform-origin özelliğinin aksine, Tailwind CSS'de bu özellik doğrudan bir sınıf olarak bulunmamaktadır.

Bununla birlikte, dönme noktasını belirlemek için Tailwind CSS'de bazı ön tanımlı sınıflar mevcuttur. Örneğin:

origin-top-left

origin-top-right

origin-bottom-left

origin-bottom-right

origin-center

Bu sınıflar, öğenin dönme noktasını belirli bir konumda yerleştirir. Örneğin, origin-top-left sınıfı öğenin dönme noktasını sol üst köşeye yerleştirirken, origin-center öğenin ortasına yerleştirir.

rotate sınıfı, Tailwind CSS'in dönüşüm (transformation) özelliklerinden biridir ve bir öğenin dönüşünü belirtmek için kullanılır. Bu sınıf, öğenin belirli bir açıda dönmesini sağlar.

Örneğin, bir div elementine rotate-45 sınıfını ekleyerek bu elementi 45 derece döndürebilirsiniz:

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...