Làm thế nào để xoay trong CSS3 xung quanh nguồn gốc?

Tôi đã các chữ cái sau ABC như hình dưới đây:Làm thế nào để xoay trong CSS3 xung quanh nguồn gốc?

<body> 
<div id="container"> 
    <div id="shape" class="spin"> 
    <div id="A" class="plane">A</div> 
    <div id="B" class="plane">B</div>  
    <div id="C" class="plane">C</div> 
    </div> 
</div>

Những gì tôi muốn là mỗi chữ cái để quay xung quanh trục x của nó?

tôi đã cố gắng (đối với chữ C):

#C { 
-webkit-animation: spinAboutItsCentre 8s linear; 
} 

@-webkit-keyframes spinAboutItsCentre { 
    from { 
     -webkit-transform: rotateX(0); 
    } 
    to { 

    -webkit-transform: rotateX(360deg); 
    } 
}

nhưng chữ C di chuyển đến chỗ chữ A là một quay nó trục của nó.

Bất kỳ ý tưởng nào?

Nguồn

2011-08-10 JD.

Bạn có chắc chắn muốn 'rotateX' thay vì chỉ' xoay vòng' không? Bạn có thể tạo ra một jsFiddle với phần còn lại của mã của bạn? –

Nó sẽ giống như thế này, bạn cần phải xác định thuộc tính biến đổi nguồn gốc của bạn; x-%, y-% và z-px.

Thông báo quay về trục Y tạo ra một chút bù đắp vì việc diễn giải của động cơ vị trí của nhân vật bắt nguồn từ "bắt đầu" (bên) của đối tượng, không phải là tâm của đối tượng.

Chỉ định 0% và 100% đại diện cho mệnh đề "từ" và "đến" của bạn, định dạng này cho phép bạn thêm nhiều dòng này khi bạn muốn tăng chuyển động trong khung thời gian đã chỉ định của mình (tức là 25% xoay 90 độ , 50% xoay 180 độ, 75% xoay 270 độ, 100% xoay 360 độ).

@-webkit-keyframes spinX 
{ 
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;} 
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;} 
} 

@-webkit-keyframes spinY 
{ 
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;} 
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;} 
}

Hãy thử các kiểu này, chúng sẽ hoạt động tốt.

#Ca 
{ 
position: absolute; 
left: 20%; 
font-size:72px; 
-webkit-animation: spinX 8s infinite; 
} 

#Cb 
{ 
position: absolute; 
left: 20%; 
font-size:72px; 
-webkit-animation: spinY 8s infinite; 
} 

<div id="Ca">C</div> 
<div id="Cb">C</div>

Nguồn

2011-08-10 20:39:49 Chris

Cảm ơn Chris, chỉ cần nhận được đầu của tôi xung quanh mã của bạn. Tôi nhận thấy tôi đã chuyển đổi: #C {opacity: 0.5; -webkit-transform: translateX (400px)}; và tôi tự hỏi nếu đây là những gì gây ra vấn đề? Nếu tôi để lại mã này, tôi vẫn có thể áp dụng vòng quay không? } –

Bạn đang sử dụng tiền tố -webkit- để tôi giả sử bạn đã thử nghiệm CSS của mình trong Chrome và Safari vì các tiền tố cho IE, Firefox và Opera là -ms-, -moz- và - o- tương ứng (ít nhất là cho bây giờ); điều đó đang được nói, tôi đã thử nghiệm phương thức mà tôi đã đăng trong cả Chrome và Safari với độ mờ là 0,5 được khai báo và nó hoạt động tốt trong cả hai. Có vẻ như vấn đề của bạn có liên quan nhiều hơn đến việc nói với trình duyệt cách/vị trí neo ký tự để xoay vòng. Đây là bản trình diễn tuyệt vời về cách tính năng CSS3 này hoạt động: http://www.w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htm – Chris

Xin chào Chris, cảm ơn sự giúp đỡ của bạn. –

Transforms có một "nguồn gốc transform-" liên kết với chúng. Khi không xác định nguồn gốc biến đổi, nó sẽ tự động được đặt ở (50%, 50%) của phần tử. Khi mã chính xác của bạn được nhập dưới dạng jsfiddle, nó hoạt động như dự định.

Tôi đoán là trong mã hoàn chỉnh của bạn, bạn đã chỉ định nguồn gốc biến đổi không chính xác hoặc có sự kỳ quặc khác trong CSS cơ sở cho lớp của bạn.

Cập nhật: Vì vậy, có, bạn đã có sự kỳ quặc trong CSS cơ bản. Sẽ hữu ích khi xem hoàn thành CSS và HTML của bạn để gỡ lỗi.

Nguồn

2011-08-10 17:11:04

Làm thế nào để xoay trong CSS3 xung quanh nguồn gốc?

Trả lời

Các vấn đề liên quan