Tôi đang cố gắng sử dụng hỗ trợ của webkit cho CSS3 transform: matrix3d(<matrix>) để tạo hiệu ứng 'thẻ rơi'. (Mục tiêu duy nhất cho đầu ra của việc này là Chrome)CSS3 matrix3d hình chữ nhật để chuyển đổi hình thang
Hiệu quả cuối cùng nên chuyển đổi qua 4 giai đoạn dưới đây và kết thúc như chỉ là một đường ngang:
Đây là CSS Tôi có bây giờ:
#test {
margin: auto auto;
height: 200px;
width: 200px;
border:1px solid black;
background-color: lightblue;
-webkit-perspective: 1000;
-webkit-transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
-webkit-animation-name: flip-card;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
}
@-webkit-keyframes flip-card {
0% {-webkit-transform: ;}
100% {-webkit-transform:
matrix3d(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 0, 0,
0, 0, 0.001, 1);}
}
Và HTML rất đơn giản để thử nghiệm:
<body>
<div id="test">this div should fall forward...</div>
</body>
Ma trận3d ở trên được dựa trên đọc this SO question, nhưng nó tạo ra một hình vuông thu hẹp lật xung quanh trục x được xác định bởi phần dưới cùng của hộp ban đầu.
Tôi hiểu rằng ma trận CSS 2d chỉ có thể tạo hình chữ nhật và hình bình hành bằng cách chuyển đổi hộp và hình dạng bất thường cần hoạt động chuyển đổi matrix3d (this hữu ích trong việc làm mới đại số tuyến tính mờ dần!) để tạo hình chữ nhật và hình bình hành.
Tôi đã xem xét một số câu hỏi SO được gắn thẻ với matrix và transformation. Hầu hết trong số họ không phải là CSS dựa và tôi đã không thể có được sự chuyển đổi tôi muốn.
Tôi tạo ra một công cụ để fiddle với giá trị chuyển đổi css ở đây: http://www.duopixel.com/ stack/webkitmatrix /, nhưng tôi sợ rằng tôi không thể tạo ra một hình thang với Chrome. Hãy thử một lần. – Duopixel
@Duopixel: đó là một công cụ tuyệt vời. Tôi có thể tạo một hình thang trong Safari ... nhưng bị lệch trên trục Y chứ không phải trục X bằng cách di chuyển Row-1, thanh trượt Column4 (thanh trượt trên cùng bên phải). Trong Chrome, cùng một thanh trượt tạo ra một hình bình hành. Sự hiểu biết của tôi là tôi nên di chuyển thanh trượt Row-4, Column-3 để tạo hình bình hành trục X, nhưng nó không có hiệu lực trong Safari hoặc Chrome. – beggs
[CoffeeScript fiddle] (http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH) có thể hữu ích. Trang blog được nhúng trên đó cũng có một số giải thích hữu ích. – mbomb007