2d transform trong css3

http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     2D Transform CSS3 2D Transforms sử dụng để tái thay đổi cấu trúc phần tử, ví dụ translate, rotate, scale, skew Bảng liệt kê số giá trị thường sử dụng 2D Transforms: Giá trị Miêu tả matrix(n,n,n,n,n,n) Được sử dụng để định nghĩa Matrix Transforms (dạng tịnh tiến theo ma trận) với giá trị translate(x,y) Được sử dụng để tịnh tiến phần tử theo trục x trục y translateX(n) Được sử dụng để tịnh tiến phần tử theo trục x translateY(n) Được sử dụng để tịnh tiến phần tử theo trục y scale(x,y) Được sử dụng để thay đổi độ rộng chiều cao phần tử scaleX(n) Được sử dụng để thay đổi độ rộng phần tử scaleY(n) Được sử dụng để thay đổi chiều cao phần tử rotate(angle) Được sử dụng để quay phần tử dựa góc (angle) skewX(angle) Được sử dụng để định nghĩa Skew Transforms (dạng tịnh tiến đối xứng lệch) với trục x skewY(angle) Được sử dụng để định nghĩa Skew Transforms với trục y Dưới ví dụ minh họa cách sử dụng thuộc tính http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Quay 20 độ góc - rotate(20deg) CSS Trong ví dụ sau, hộp quay theo góc 20 độ: div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE */ -ms-transform: rotate(20deg); /* Safari */ -webkit-transform: rotate(20deg); /* Cu phap chuan */ transform: rotate(20deg); } Vi du 2D Transform CSS Vi du 2D Transform CSS Kết là: Quay -20 độ góc - rotate(-20deg) CSS Trong ví dụ sau, hộp quay theo góc -20 độ: div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE */ -ms-transform: rotate(-20deg); /* Safari */ -webkit-transform: rotate(-20deg); /* Cu phap chuan */ transform: rotate(-20deg); } Vi du 2D Transform CSS Vi du 2D Transform CSS Kết là: Đối xứng lệch theo trục x – skewX(20deg) CSS Trong ví dụ sau, hộp đối xứng lệch theo trục x: div { height: 100px; background-color: pink; solid black; } div#skewDiv { -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); Transform CSS width: 300px; border: 1px /* IE */ /* Safari */ /* Cu phap chuan */ Kết là: Đối xứng lệch theo trục y – skewY(20deg) CSS Trong ví dụ sau, hộp đối xứng lệch theo trục x: http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     div { height: 100px; background-color: pink; solid black; } div#skewDiv { -ms-transform: skewY(20deg); -webkit-transform: skewY(20deg); Transform CSS width: 300px; border: 1px /* IE */ /* Safari */ /* Cu phap chuan */ Kết là: Matrix Transform CSS Ví dụ sau minh họa cách sử dụng Matrix Transfrom CSS: div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv1 { /* IE */ -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Cu phap chuan */ transform: matrix(1, -0.3, 0, 1, 0, 0); } Vi du 2D Transform CSS Vi du 2D Transform CSS Kết là:− Ví dụ Matrix Transform theo hướng khác: div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv2 { /* IE */ -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */ -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Cu phap chuan */ transform: matrix(1, 0, 0.5, 1, 150, 0); } Vi du 2D Transform CSS Vi du 2D Transform CSS Kết là:− Vi du 2D Transform CSS Vi du 2D Transform CSS   http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... Vi du 2D Transform CSS Vi du 2D Transform CSS Kết là:− Vi du 2D Transform CSS Vi du 2D Transform CSS   http://vietjack.com/... Safari */ -webkit -transform: rotate(-20deg); /* Cu phap chuan */ transform: rotate(-20deg); } Vi du 2D Transform CSS Vi du 2D Transform CSS ... Safari */ -webkit -transform: rotate(20deg); /* Cu phap chuan */ transform: rotate(20deg); } Vi du 2D Transform CSS Vi du 2D Transform CSS