3d transform trong css

http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     3D Transform CSS Sử dụng 3D Transform CSS, bạn di chuyển phần tử theo trục: x, y z Dưới ví dụ xác định cách rõ ràng cách phần tử quay theo trục Các phương thức 3D Transform CSS Bảng liệt kê phương thức sử dụng để gọi 3D Transform CSS: Giá trị Miêu tả matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Được sử dụng để tịnh tiến phần tử sử dụng 16 giá trị ma trận translate3d(x,y,z) Được sử dụng để tịnh tiến phần tử theo trục x, trục y trục z translateX(x) Được sử dụng để tịnh tiến phần tử theo trục x translateY(y) Được sử dụng để tịnh tiến phần tử theo trục y translateZ(z) Được sử dụng để tịnh tiến phần tử theo trục z scaleX(x) Được sử dụng để Scale Transform theo trục x scaleY(y) Được sử dụng để Scale Transform theo trục y scaleY(y) Được sử dụng để Scale Transform theo trục z rotateX(angle) Được sử dụng để Rotate Transform theo trục x rotateY(angle) Được sử dụng để Rotate Transform theo trục y 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     rotateZ(angle) Được sử dụng để Rotate Transform theo trục z 3D Transform theo trục x CSS Ví dụ minh họa cách sử dụng 3D Transform theo trục x CSS: div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); /* Cu phap chuan */ } 3D Transform CSS3

Rotate theo truc X

3D Transform CSS3 Kết là: 3D Transform theo trục y CSS Ví dụ minh họa cách sử dụng 3D Transform theo trục y CSS: div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#yDiv { -webkit-transform: rotateY(150deg); /* Safari */ transform: rotateY(150deg); /* Cu phap chuan */ } 3D Transform CSS3

Rotate theo truc Y

3D Transform CSS3 Kết là: 3D Transform theo trục z CSS Ví dụ minh họa cách sử dụng 3D Transform theo trục z CSS: div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); /* Cu phap chuan */ } 3D Transform CSS3

Rotate theo truc Z

3D Transform CSS3 Kết là: 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       http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... truc X

3D Transform CSS3 Kết là: 3D Transform theo trục y CSS Ví dụ minh họa cách sử dụng 3D Transform theo trục y CSS: div {... theo truc Y

3D Transform CSS3 Kết là: 3D Transform theo trục z CSS Ví dụ minh họa cách sử dụng 3D Transform theo trục z CSS: div {...     rotateZ(angle) Được sử dụng để Rotate Transform theo trục z 3D Transform theo trục x CSS Ví dụ minh họa cách sử dụng 3D Transform theo trục x CSS: div { width: 200px;