Tôi muốn xoay đối tượng từ -180 độ đến 180 độ qua chuyển đổi CSS3 và chuyển tiếp. Điều này hoạt động tốt, nhưng tôi muốn kiểm soát hướng quay. Làm thế nào để xác định xem nó sẽ đi theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ?Làm thế nào để xác định hướng quay trong chuyển tiếp CSS3?
0 .. 180 theo chiều kim đồng hồ, 0 .. -180 ngược chiều kim đồng hồ. Vì vậy, số dương quay theo chiều kim đồng hồ, âm - theo cách khác xung quanh.
Tôi tạo ra một ví dụ về làm thế nào để xoay:
<html>
<style type="text/css">
.rotatedDiv {
margin-top: 200px;
margin-left: 200px;
-webkit-transition: -webkit-transform 3s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
</style>
<body>
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'">
This div will do a spin when clicked!
</div>
</body>
</html>
Đầu tiên chúng tôi hiển thị div xoay. Khi bạn nhấp vào nó, nó sẽ xoay. Tùy thuộc vào giá trị - âm hoặc dương, nó sẽ xoay ngược chiều kim đồng hồ hoặc theo chiều kim đồng hồ.
Nhưng nếu bạn muốn chuyển đổi giữa 30 và 40 độ, chỉ ngược chiều kim đồng hồ? – Monokai
Tôi đã thêm một ví dụ –
Cảm ơn. Cuối cùng tôi đã đưa ra một giải pháp, được kích hoạt bởi ví dụ của bạn. Độ không bị giới hạn tối thiểu là 0 và tối đa là 360. Bạn cũng có thể chỉ định -720 chẳng hạn. Bằng cách này, bạn có thể điều khiển chuyển động theo chiều kim đồng hồ và ngược chiều kim đồng hồ. – Monokai
Dường như bạn cũng cần phải nhớ đặt các giá trị bê tông ban đầu "từ", nếu không dấu +/- sẽ không hoạt động tốt.
Tôi nghĩ bạn sẽ cần đặt điểm giữa trong hoạt ảnh của mình. Tôi đã không nhìn thấy bất cứ điều gì cho phép bạn chỉ định cách xoay vòng. – drudge
Vì vậy, đó là thông qua các thuộc tính hoạt hình css3 bạn có nghĩa là gì? Vâng, đó là những gì tôi cũng nghĩ, nhưng tôi muốn làm điều đó chỉ với chuyển tiếp css3 đơn giản và biến đổi tài sản, nếu có thể. – Monokai