Làm thế nào để áp dụng nhiều biến đổi trong CSS?

Sử dụng CSS, làm thế nào tôi có thể áp dụng nhiều hơn một transform?

Ví dụ: Trong các phần sau, chỉ áp dụng bản dịch, không phải xoay.

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

Bạn phải đặt chúng trên một dòng như thế này:

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

Khi bạn có nhiều chỉ thị biến đổi, chỉ có lệnh cuối cùng sẽ được áp dụng. Nó giống như bất kỳ quy tắc CSS nào khác.

Hãy ghi nhớ nhiều chỉ thị một dòng được áp dụng từ phải sang trái .

Đây: transform: scale(1,1.5) rotate(90deg);
và:transform: rotate(90deg) scale(1,1.5);

sẽ không tạo ra kết quả tương tự:

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

Tôi thêm câu trả lời này không phải vì nó có thể hữu ích mà chỉ vì nó đúng.

Ngoài việc sử dụng các câu trả lời hiện có giải thích cách thực hiện nhiều bản dịch bằng cách xâu chuỗi chúng, bạn cũng có thể tự xây dựng ma trận 4x4

Tôi đã chộp được hình ảnh sau từ một số trang web ngẫu nhiên mà tôi tìm thấy trong khi googling hiển thị ma trận quay:

Xoay quanh trục x:
Xoay quanh trục y:
Xoay quanh trục z:

Tôi không thể tìm thấy một ví dụ hay về dịch thuật, vì vậy, giả sử tôi nhớ / hiểu đúng, dịch:

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

Xem thêm tại bài viết Wikipedia về chuyển đổi cũng như hướng dẫn CSS3 thực dụng giải thích nó khá tốt. Một hướng dẫn khác mà tôi đã tìm thấy giải thích các ma trận xoay tùy ý là các ghi chú của Egon Rath về ma trận

Tất nhiên, phép nhân ma trận hoạt động giữa các ma trận 4 x 4 này, vì vậy để thực hiện phép quay theo sau là bản dịch, bạn tạo ma trận xoay phù hợp và nhân nó với ma trận dịch.

Điều này có thể giúp bạn tự do hơn một chút để làm cho nó vừa phải, và cũng sẽ khiến mọi người hoàn toàn không thể hiểu những gì nó đang làm, kể cả bạn trong năm phút.

Nhưng, bạn biết đấy, nó hoạt động.

Chỉnh sửa: Tôi mới nhận ra rằng tôi đã quên đề cập đến việc sử dụng có lẽ quan trọng và thiết thực nhất cho việc này, đó là tăng dần các biến đổi 3D phức tạp thông qua JavaScript, nơi mọi thứ sẽ có ý nghĩa hơn một chút.

Bạn cũng có thể áp dụng nhiều biến đổi bằng cách sử dụng một lớp đánh dấu bổ sung, ví dụ:

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

Điều này có thể thực sự hữu ích khi hoạt ảnh các yếu tố với các biến đổi bằng Javascript.

Bạn có thể áp dụng nhiều hơn một biến đổi như thế này:

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

Đôi khi trong tương lai, chúng ta có thể viết nó như thế này:

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

Điều này sẽ trở nên đặc biệt hữu ích khi áp dụng các lớp riêng lẻ trên một phần tử:

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

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

Cú pháp này được xác định trong đặc tả CSS Transforms Cấp 2 đang thực hiện , nhưng không thể tìm thấy bất cứ điều gì về trình duyệt hiện tại hỗ trợ ngoài chrome canary. Hy vọng một ngày nào đó tôi sẽ quay lại và cập nhật hỗ trợ trình duyệt tại đây;)

Tìm thấy thông tin trong bài viết này mà bạn có thể muốn kiểm tra về cách giải quyết cho các trình duyệt hiện tại.

Chỉ cần bắt đầu từ đó trong CSS , nếu bạn lặp lại 2 giá trị trở lên, luôn luôn áp dụng một giá trị cuối cùng, trừ khi sử dụng !importantthẻ, nhưng đồng thời tránh sử dụng !importantcàng nhiều càng tốt, vì vậy trong trường hợp của bạn đó là vấn đề, vì vậy, thứ hai biến đổi ghi đè lên cái đầu tiên trong trường hợp này ...

Vậy làm thế nào bạn có thể làm những gì bạn muốn sau đó? ...

Đừng lo lắng , chuyển đổi chấp nhận nhiều giá trị cùng một lúc ... Vì vậy, mã dưới đây sẽ hoạt động:

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

Nếu bạn muốn chơi xung quanh với biến đổi, hãy chạy iframe từ MDN bên dưới:

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

Nhìn vào liên kết dưới đây để biết thêm:

<< Biến đổi CSS >>

Biến đổi Xoay và Dịch trong một dòng css: -Làm thế nào?

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>