CSS'de birden çok dönüşüm nasıl uygulanır?

CSS kullanarak, birden fazla uygulamayı nasıl uygulayabilirim transform?

Örnek: Aşağıda, döndürme değil yalnızca çeviri uygulanır.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

Onları böyle bir satıra koymalısınız:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

Birden çok dönüşüm yönergesine sahip olduğunuzda, yalnızca sonuncusu uygulanır. Diğer herhangi bir CSS kuralı gibi.

Sağdan sola birden çok dönüştürme tek satır yönergesinin uygulandığını unutmayın .

Bu: transform: scale(1,1.5) rotate(90deg);
ve:transform: rotate(90deg) scale(1,1.5);

olacak değil aynı sonucu üretmek:

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

Bu cevabı yardımcı olacağı için değil, doğru olduğu için ekliyorum.

Zincirleme yapılarak birden fazla çeviri yapmayı açıklayan mevcut cevapları kullanmaya ek olarak , 4x4 matrisini kendiniz de oluşturabilirsiniz.

Googling sırasında döndürdüğüm matrisleri gösteren bazı rastgele sitelerden aşağıdaki resmi yakaladım :

X ekseni etrafında dönme:
y ekseni
etrafında dönme: z ekseni etrafında dönme:

Çeviri için iyi bir örnek bulamadım, bu yüzden doğru hatırladığımı / anladığımı varsayarak, çeviri:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

Dönüşümle ilgili Wikipedia makalesinin yanı sıra , oldukça iyi açıklayan Pragamatic CSS3 eğitiminde daha fazlasını görün . Keyfi rotasyon matrislerini açıklayan başka bir kılavuz da Egon Rath'ın matrislerle ilgili notları

Matris çarpımı elbette bu 4x4 matrisleri arasında çalışır, bu nedenle bir dönüş ve ardından bir çeviri gerçekleştirmek için uygun dönüş matrisini yapar ve çeviri matrisi ile çarparsınız.

Bu size doğru olanı elde etmek için biraz daha özgürlük verebilir ve ayrıca beş dakika içinde siz de dahil olmak üzere herkesin ne yaptığını anlamasını neredeyse imkansız hale getirecektir.

Ama biliyorsunuz, işe yarıyor.

Düzenleme: Ben sadece bu arada, işler biraz daha mantıklı olacak JavaScript aracılığıyla aşamalı olarak karmaşık 3D dönüşümleri oluşturmak için, muhtemelen en önemli ve pratik kullanım söz bahsetti özledim.

Ayrıca, fazladan bir biçimlendirme katmanı kullanarak birden çok dönüşüm uygulayabilirsiniz, örneğin:

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

Bu, Javascript kullanarak dönüşümleri olan öğeleri canlandırırken gerçekten yararlı olabilir.

Bunun gibi birden fazla dönüşüm uygulayabilirsiniz:

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}

Gelecekte, böyle yazabiliriz:

li:nth-child(2) {
    rotate: 15deg;
    translate:-20px 0px;        
}

Bir öğeye ayrı ayrı sınıflar uygulanırken bu özellikle yararlı olacaktır:

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

Bu sözdizimi, devam eden CSS Dönüşümleri Düzey 2 spesifikasyonunda tanımlanır , ancak mevcut tarayıcı desteği hakkında krom kanarya dışında bir şey bulamaz. Umarım bir gün geri geleceğim ve burada tarayıcı desteğini güncelleyeceğim;)

Bu makalede , geçerli tarayıcılar için geçici çözümlerle ilgili olarak kontrol etmek isteyebileceğiniz bilgileri bulundu .

Oradan başlayın, CSS'de , 2 veya daha fazla değeri tekrarlarsanız, !importantetiket kullanmadıkça her zaman sonuncusu uygulanır , ancak aynı zamanda !importantolabildiğince fazla kullanmaktan kaçının , böylece durumunuzda sorun, yani ikincisi dönüşüm bu durumda ilkini geçersiz kılar ...

Öyleyse ne istersen onu nasıl yapabilirsin? ...

Endişelenmeyin , transform aynı anda birden fazla değeri kabul eder ... Bu nedenle aşağıdaki kod işe yarayacaktır:

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

Dönüştürme ile oynamak isterseniz, aşağıdaki MDN'den iframe'i çalıştırın :

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

Daha fazla bilgi için aşağıdaki bağlantıya bakın:

<< CSS dönüşümü >>

Dönüş Rotate ve Translate tek satır css: -Nasıl?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }

<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>