chuyển đổi quy mô ma trận không hoạt động

Question

Tôi phải sử dụng ma trận biến đổi để chuyển đổi animate: tỷ lệ của một phần tử.

Tôi muốn mở rộng quy mô từ 0 đến 1. Nếu tôi sử dụng đoạn mã sau nó hoạt động đúng cách:

.container { 
    width: 200px; 
    height: 100px; 
    background: yellow; 
    transform: scale(0); 
    transition: transform 1s; 
} 
.container.open { 
    transform: scale(1); 
} 

https://jsfiddle.net/w4kuth78/1/

Nếu tôi sử dụng ma trận chính nó, nó là không làm việc.

.container { 
    width: 200px; 
    height: 100px; 
    background: yellow; 
    transform: matrix(0, 0, 0, 0, 0, 0); 
    transition: transform 1s; 
} 
.container.open { 
    transform: matrix(1, 0, 0, 1, 0, 0); 
} 

https://jsfiddle.net/m7qpetkh/1/

Tôi có làm điều gì sai trái hay là này chỉ là không làm việc? Tôi tự hỏi, bởi vì nó không hoạt động trong Chrome và Firefox ...

Đầu ra gỡ lỗi console_log nói rằng khi chia tỷ lệ từ 0 đến 1 ma trận cũng được đặt từ ma trận (0,0,0,0, 0,0) đến ma trận (1,0,0,1,0,0).

EDIT:

Tổng số nhầm lẫn ... Nếu tôi thay đổi các giá trị scaleX và scaleY trong ma trận để 0.1 hay 0.01 nó hoạt động ... wow

Answer 1

Khi hiệu ứng động hoặc chuyển đổi biến đổi, biến đổi danh sách hàm phải được nội suy. Hai hàm biến đổi có cùng tên và cùng số đối số được nội suy bằng số mà không có chuyển đổi trước đây. Giá trị được tính toán sẽ có cùng loại hàm biến đổi với cùng số đối số.

Quy tắc đặc biệt áp dụng cho rotate3d(), matrix(), matrix3d ​​() và perspective(). Hàm transform(), matrix3d ​​() và perspective() được chuyển đổi thành ma trận 4x4 đầu tiên và nội suy. Nếu một trong các ma trận cho phép nội suy là số ít hoặc không thể đảo ngược (iff yếu tố quyết định của nó là 0), phần tử đã chuyển đổi không được hiển thị và chức năng hoạt ảnh được sử dụng phải quay trở lại hoạt ảnh rời rạc theo các quy tắc của đặc tả hoạt ảnh tương ứng.

Sau đó, trong trường hợp của ma trận (0,0,0,0,0,0) đó là hiển nhiên, các ma trận kết quả 4X4 cho quy mô là singulars

Cho vay để http://www.w3.org/TR/css3-2d-transforms/