Helpex - Trao đổi & giúp đỡ Đăng nhập
43

Tôi có một phần tử có hai lớp, một lớp được gọi là "xoay" sẽ xoay phần tử 360 độ và một phần tử khác được gọi là "nhân đôi" sẽ chia tỷ lệ phần tử lên gấp 2 lần kích thước bình thường của nó:

.rotate {
    transform: rotate(0deg);
}

.rotate:hover {
    transform: rotate(360deg);
}

.doublesize {
    transform: scale(1);
}

.doublesize:hover {
    transform: scale(2);
}

http://jsfiddle.net/Sbw8W/

Tôi đoán điều này không hoạt động vì các lớp ghi đè transformtài sản của nhau?

Tôi biết rằng tôi có thể dễ dàng thực hiện điều này trong một quy tắc CSS như:

.doublerotatesize {
    transform: scale(1) rotate(0deg);
}

.doublerotatesize:hover {
    transform: scale(2) rotate(360deg);
}

Nhưng tôi muốn có thể áp dụng từng lớp riêng biệt với lớp khác nếu có thể.

43 hữu ích 2 bình luận 28k xem chia sẻ
49

Tôi đoán điều này không hoạt động vì các lớp ghi đè transformtài sản của nhau?

Chính xác. Đây là một hạn chế đáng tiếc do tác dụng phụ của cách hoạt động của dòng thác.

Bạn sẽ phải chỉ định cả hai hàm trong một transformkhai báo duy nhất . Bạn có thể chỉ cần liên kết cả hai bộ chọn lớp với nhau thay vì tạo một lớp mới cho một biến đổi kết hợp:

.doublesize.rotate {
    -webkit-transform: scale(1) rotate(0deg);
}

.doublesize.rotate:hover {
    -webkit-transform: scale(2) rotate(360deg);
}

... nhưng như bạn có thể thấy, vấn đề nằm ở thuộc transformtính hơn là ở bộ chọn.


Điều này dự kiến ​​sẽ được khắc phục trong Transforms cấp 2, nơi mỗi biến đổi đã được thăng cấp thành thuộc tính riêng của nó , điều này sẽ cho phép bạn kết hợp các biến đổi chỉ bằng cách khai báo chúng một cách riêng biệt như cách bạn làm với bất kỳ kết hợp thuộc tính CSS nào khác. Điều này có nghĩa là bạn có thể chỉ cần làm điều này:

/* Note that rotate: 0deg and scale: 1 are omitted
   as they're the initial values */

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

... và tận dụng lợi thế của dòng thác hơn là bị cản trở bởi nó. Không cần tên lớp chuyên biệt hoặc các quy tắc CSS kết hợp.

49 hữu ích 3 bình luận chia sẻ
8

Sử dụng các biến CSS, bạn có thể có sự phân tách này. Ý tưởng là chuỗi bao nhiêu chuyển đổi bạn muốn bên trong phần tử bằng cách sử dụng các biến CSS, sau đó bạn cập nhật từng biến riêng lẻ:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform:
    /* I prepared 3 placeholder so we can chain 3 transformation later */
    var(--t1,translate(0)) /* we need a fallback value, we consider a null transform*/
    var(--t2,translate(0)) 
    var(--t3,translate(0));
}

.transitionease {
  transition: all 1s ease;
}

.transitionease:hover {
  transition: all 3s ease;
}

.rotate {
  --t1: rotate(0deg);
}

.rotate:hover {
  --t1: rotate(360deg);
}

.doublesize {
  --t2: scale(1);
}

.doublesize:hover {
  --t2: scale(2);
}
<div class="transitionease doublesize rotate "></div>
Mở rộng đoạn mã

8 hữu ích 1 bình luận chia sẻ
3

Bạn chắc chắn có thể kết hợp nhiều hoạt ảnh, nhưng không thể kết hợp các lớp CSS. Xem câu trả lời đầu tiên tại đây: kết hợp nhiều hoạt ảnh css thành một hoạt ảnh tổng thể

Phần đầu tiên cho bạn biết cách kết hợp hoạt ảnh với CSS với một số tham số (độ trễ, thời lượng):

.outside.animate {
   -webkit-animation-delay: 0s, .5s, .5s;
   -webkit-animation-duration: 500ms, 1000ms, 1000ms;
   -webkit-animation-name: button-bounce, rotate, skyblue;
}

Chắc chắn, trước tiên bạn cần xác định các hoạt ảnh của mình.

3 hữu ích 5 bình luận chia sẻ
2

Bạn không thể thực hiện việc này chỉ bằng CSS, nhưng nếu bạn không ngại sử dụng một số jQuery, bạn có thể đính kèm hiệu ứng này bằng một số jQuery:

var $elem = $('.cssDropPinImage');
$({ deg: 0 }).animate({ deg: 359 }, {
    duration: 600,
    step: function (now) {
        var scale = (2 * now / 359);
        $elem.css({
            transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
        });
    }
});

Hy vọng điều này sẽ giúp các độc giả khác, đối mặt với cùng một vấn đề.

2 hữu ích 1 bình luận chia sẻ
0

Câu hỏi gợi ý về tỷ lệ và xoay hoạt ảnh khi di chuột. Một cách thực dụng khác để giải quyết vấn đề này, là bằng cách sắp xếp lại các phần tử trong HTML và áp dụng các biến đổi riêng lẻ cho phần tử cha và con, chỉ phản hồi khi di chuột trên phần tử cha.

Nó trông giống như thế này:

<div class="doublesize">
   <div class="rotate"></div>
</div>
.doublesize {
   transition: transform 1s ease;
}

.rotate {
   width: 100px; 
   height: 100px;
   background-color: red;   
   transition: transform 1s ease;
}

.doublesize:hover {
   transform: scale(2);    
}

.doublesize:hover .rotate {
   transform: rotate(360deg);
}

http://jsfiddle.net/n38csxy1/4/

Tôi biết đây là một bước nhảy vọt so với thiết lập ban đầu, nhưng tôi hy vọng quan điểm này sẽ giúp ích cho ai đó.

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css css-transforms , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading