Tôi đang cố tạo hiệu ứng 3D "mở cửa" trong CSS nhưng tôi không thể thực hiện được. Vấn đề là sử dụng hàm rotateY() làm cho phần tử quay. Bạn có thể kiểm tra tại đây http://jsfiddle.net/uC4du/1/Hiệu ứng 3D mở cửa trong CSS
Bạn có biết cách thay đổi trục tham chiếu "xoay vòng" không? Tôi nên làm gì để làm cho phần tử xoay theo góc trái của nó như là tham chiếu?
Bạn có thể sử dụng thuộc tính 'chuyển đổi nguồn gốc' (http://www.w3schools.com/cssref/css3_pr_transform-origin.asp).
Đặt thành thứ gì đó như: "-webkit-transform-origin: 0% 50%;"
Dưới đây là ví dụ của bạn sử dụng tài sản đó: http://jsfiddle.net/aV76H/
Hy vọng nó sẽ giúp!
Một chút cập nhật để có được chính xác những gì tôi muốn nói: http://jsfiddle.net/aV76H/2054/ Phiên bản gốc có hiệu ứng kỳ lạ ở phần trên cùng, điều này –
Đây là một câu trả lời rất hữu ích, nhưng bất cứ ai có thể chỉ cho tôi đúng hướng để sửa đổi điều này để làm việc trên Firefox? – Ryan
Một tùy chọn là đặt đối tượng cha mẹ thành hai lần rộng, một nửa để trống. Sau đó, khi nó lật trên trục trung tâm của nó, phần có thể nhìn thấy dường như hoạt động như một cánh cửa. –
@DA Vâng tôi đã làm, nhưng nó sẽ làm mọi thứ khó khăn hơn nhiều: ( –
Kiểm tra điều này, nó sẽ hữu ích http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image- transitions/tympanus.net/Development/ImageTransitions/index2.html –