Xoay nội dung xung quanh trục trung tâm trong html5

Question

Vì vậy, tôi là một người vẽ đồ họa và tôi đã được yêu cầu phát triển một khái niệm cho trang web mới của khách hàng. Một trang web nhỏ với số lượng nội dung giới hạn. Ý tưởng tôi đã đưa ra là đặt tất cả các phần của trang web trên div và sau đó xoay chúng như một bánh xe khi người dùng nhấp vào liên kết menu. Điều tôi cần tìm hiểu là: Có thể xoay toàn bộ các div chứa nội dung thông thường xung quanh điểm pivot trung tâm bằng html5 không? Xoay cần phải được làm động nội dung chứa trong mỗi div xoay cần xoay cùng với div chứa của nó. Nếu có thể, làm thế nào?

Tôi đã googled nó và tìm thấy ví dụ về luân phiên thứ với CSS3 và tôi đã nhìn thấy sự biến đổi html5 nhưng Im không chắc là tôi đã thấy bất cứ điều gì phức tạp này trước và tôi không thể tìm thấy bất kỳ ví dụ để làm việc tắt. Vì vậy, Im một chút quan tâm của nó không thực sự có thể vì một lý do nào đó. Im cũng mở để sử dụng một cái gì đó như javascript để làm cho điều này xảy ra.

Answer 1

Bạn có thể làm một cái gì đó giống như this:

HTML

<div class="container"> 
    <div class="first">First</div> 
    <div class="second">Second</div> 
    <div class="third">Third</div> 
</div> 

CSS

.container { 
    transition: transform 1s; 
    transform: rotate(0); 
    position: relative; 
} 

.container>div { 
    position: absolute; 
} 

.container.second { 
    transform: rotate(120deg); 
} 

.container.third { 
    transform: rotate(240deg); 
} 

.container .first { 
    bottom: 0; 
    right: 0; 
    transform: rotate(120deg); 
} 

.container .second { 
    left: 0; 
    right: 0; 
    transform: rotate(240deg); 
} 

Bạn có thể thêm một số js đơn giản để thay đổi container lớp hiện hành.