Làm cách nào để đặt nguồn gốc webkit-transform-origin thành hình khối 3D cuộn trên các cạnh của nó?

Tôi đang loay hoay xung quanh với quan điểm CSS3 & biến đổi. Bắt đầu từ this great 3D cube example, tôi muốn sửa đổi khối lập phương sao cho nó không chỉ xoay quanh tâm của nó, mà còn cuộn qua các cạnh của nó.Làm cách nào để đặt nguồn gốc webkit-transform-origin thành hình khối 3D cuộn trên các cạnh của nó?

Tôi có độ nghiêng trái đầu tiên bằng cách xoay khối lập phương xung quanh trục z, với -webkit-transform-origin: bottom left (see fiddle; ví dụ được giới hạn ở mền trái để đơn giản). Đối với một nghiêng bên trái tiếp theo, tôi đang đấu tranh làm thế nào để tiếp tục điều chỉnh nguồn gốc. Về mặt khái niệm, tôi sẽ cần đặt nguồn gốc tương ứng với vùng chứa mẹ (ví dụ: đối với các mền trái liên tiếp, nó sẽ dần dần đi lang thang sang trái trong các bước 200px).

Bất kỳ trợ giúp nào được đánh giá cao!

Nguồn

2012-11-08 netzwerg

Tôi đã từng làm việc này và tôi nghĩ bạn sẽ cần phải xem xét css matrix transformations sẵn có để bạn có được chính xác những gì bạn muốn.

Thật không may nó không đơn giản như xoay, sau đó di chuyển nguồn gốc biến đổi. Điều gì xảy ra là khối lập phương được xoay quanh cạnh đó, nhưng sau đó nếu bạn di chuyển điểm chuyển đổi, nó sẽ áp dụng biến đổi trước đó cho khối lập phương bằng cách sử dụng điểm xuất phát mới này.

Còn gì nữa, bạn cũng cần dịch vị trí của hình khối. Bạn không thể di chuyển nó hoàn toàn bằng cách sử dụng phép quay. Ma trận cần giải quyết tất cả những điều này tôi nghĩ (Tôi không biết nhiều về chúng tôi sợ)

Bạn có thể xem jsfiddle đã sửa đổi mà tôi đã tạo và dịch. Điểm dịch là trung tâm, vì vậy nó không giống như khối lập phương là "lăn". đây là các mã phụ quan trọng:

... 

//left 
zAngle -= 90; 
xPos -= 50; 
//rotate and translate the position of the cube 
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)"; 

...

js Fiddle ở đây: http://jsfiddle.net/DigitalBiscuits/evYYm/20/

Hy vọng điều này sẽ giúp bạn!

Nguồn

2012-11-16 22:38:46

+1 để được trợ giúp tốt - nhưng tôi đang tìm giải pháp thực tế ;-) – netzwerg