วิธีการใช้การแปลงหลายครั้งใน CSS?

การใช้ CSS ฉันจะใช้มากกว่าหนึ่งได้transformอย่างไร

ตัวอย่าง: ในตัวอย่างต่อไปนี้จะใช้การแปลเท่านั้นไม่ใช่การหมุน

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

คุณต้องใส่มันในหนึ่งบรรทัดเช่นนี้:

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

เมื่อคุณมีคำสั่งแปลงหลายรายการจะใช้เฉพาะคำสั่งสุดท้ายเท่านั้น มันเหมือนกับกฎ CSS อื่น ๆ

เก็บไว้ในใจหลายแปลงหนึ่งบรรทัดคำสั่งจะถูกนำมาใช้จากขวาไปซ้าย

นี่: transform: scale(1,1.5) rotate(90deg);
และ:transform: rotate(90deg) scale(1,1.5);

จะไม่ให้ผลลัพธ์เดียวกัน:

.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>

ฉันกำลังเพิ่มคำตอบนี้ไม่ใช่เพราะมีแนวโน้มที่จะเป็นประโยชน์ แต่เพียงเพราะมันเป็นความจริง

นอกเหนือจากการใช้คำตอบที่มีอยู่ซึ่งอธิบายวิธีการแปลมากกว่าหนึ่งคำโดยผูกมัดพวกคุณยังสามารถสร้างเมทริกซ์ 4x4 ด้วยตัวคุณเอง

ฉันจับภาพต่อไปนี้จากเว็บไซต์สุ่มบางแห่งที่ฉันพบขณะ googlingซึ่งแสดงเมทริกซ์การหมุน:

การหมุนรอบแกน x: การ
หมุนรอบแกน y: การ
หมุนรอบแกน z:

ฉันไม่สามารถหาตัวอย่างการแปลที่ดีได้ดังนั้นสมมติว่าฉันจำ / เข้าใจถูกต้องการแปล:

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

ดูเพิ่มเติมที่บทความ Wikipedia เกี่ยวกับการแปลงเช่นเดียวกับการสอน Pragamatic CSS3ซึ่งอธิบายได้ค่อนข้างดี คู่มืออื่นที่ฉันพบซึ่งอธิบายถึงเมทริกซ์การหมุนโดยพลการคือโน้ตของ Egon Rath เกี่ยวกับเมทริกซ์

การคูณเมทริกซ์ทำงานระหว่างเมทริกซ์ 4x4 เหล่านี้ดังนั้นเพื่อทำการหมุนตามด้วยการแปลคุณต้องสร้างเมทริกซ์การหมุนที่เหมาะสมและคูณมันด้วยเมทริกซ์การแปล

สิ่งนี้จะช่วยให้คุณมีอิสระมากขึ้นในการทำให้ถูกต้องและจะทำให้มันเป็นไปไม่ได้เลยทีเดียวสำหรับทุกคนที่จะเข้าใจสิ่งที่กำลังทำรวมถึงคุณในอีกห้านาที

แต่คุณรู้ว่ามันใช้งานได้

แก้ไข: ฉันเพิ่งตระหนักว่าฉันพลาดการกล่าวถึงการใช้สิ่งนี้ที่สำคัญและเป็นประโยชน์ที่สุดซึ่งก็คือการสร้างการแปลง 3 มิติที่ซับซ้อนผ่านทาง JavaScript ซึ่งสิ่งต่าง ๆ จะมีเหตุผลมากกว่านี้

คุณยังสามารถใช้การแปลงหลายรูปแบบโดยใช้มาร์กอัปชั้นพิเศษเช่น:

<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>

สิ่งนี้มีประโยชน์จริง ๆ เมื่อสร้างภาพเคลื่อนไหวองค์ประกอบด้วยการแปลงโดยใช้ Javascript

คุณสามารถใช้การแปลงมากกว่าหนึ่งแบบดังนี้:

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

บางครั้งในอนาคตเราสามารถเขียนดังนี้:

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

สิ่งนี้จะเป็นประโยชน์อย่างยิ่งเมื่อใช้แต่ละคลาสกับองค์ประกอบ:

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

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

ไวยากรณ์นี้ถูกกำหนดไว้ในข้อมูลจำเพาะ CSS Transforms ระดับที่กำลังดำเนินการแต่ไม่พบสิ่งใดเกี่ยวกับเบราว์เซอร์ปัจจุบันที่รองรับ Chrome รุ่นอื่น หวังว่าสักวันฉันจะกลับมาและอัปเดตการสนับสนุนเบราว์เซอร์ที่นี่;)

พบข้อมูลในบทความนี้ซึ่งคุณอาจต้องการตรวจสอบเกี่ยวกับวิธีแก้ปัญหาสำหรับเบราว์เซอร์ปัจจุบัน

เพียงแค่เริ่มจากตรงนั้นในCSSถ้าคุณทำซ้ำ 2 ค่าหรือมากกว่านั้นจะใช้ค่าล่าสุดเสมอเว้นแต่จะใช้!importantแท็ก แต่ในขณะเดียวกันก็หลีกเลี่ยงการใช้!importantให้มากที่สุดเท่าที่จะทำได้ดังนั้นในกรณีของคุณนั่นคือปัญหา เปลี่ยนแทนที่คนแรกในกรณีนี้ ...

แล้วคุณจะทำสิ่งที่คุณต้องการได้อย่างไร ...

ไม่ต้องกังวลการแปลงรับหลายค่าพร้อมกัน ... ดังนั้นโค้ดด้านล่างนี้จะใช้งานได้:

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

หากคุณต้องการเล่นด้วยการแปลงให้เรียกใช้ iframe จากMDNด้านล่าง:

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

ดูลิงค์ด้านล่างสำหรับข้อมูลเพิ่มเติม:

<< เปลี่ยน CSS >>

แปลงหมุนและแปลในบรรทัดเดียว css: - อย่างไร

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>