Hôm nay mình sẽ viết về một số kỹ thuật CSS sử dụng thuộc tính transform và thuộc tính transition cũng như các giá trị của chúng.
Tóm Tắt
Transform 2D
transform: translate(50px;100px);Đoạn code này sẽ dịch chuyển phần tử sang phải 50px và xuống dưới 100px so với vị trí ban đầu của nó
transform: rotate(20deg)Xoay phần tử 20 độ theo chiều kim đồng hồ, nếu đặt là -20deg thì sẽ xoay 20 độ ngược chiều kim đồng hồ.
transform: scale(2,3)Tăng chiều rộng của phần tử lên 2 lần và chiều cao lên 3 lần
Ngoài ra chúng ta còn sử dụng scaleX() để tăng riêng chiều rộng và scaleY() để tăng riêng chiều cao
transform: skewX(20deg)Làm cho phần từ bị xô chéo 20 độ theo chiều ngang
Ngoài ra chúng ta còn sử dụng skewY() để phần tử xô chéo theo chiều dọc và skew() để phần tử xô chéo theo 2 chiều
Transform 3D
transform: rotateX(30deg)Xoay quanh trục x (trục nằm ngang) một góc 30 độ
Ngoài ra chúng ta còn sử dụng rotateY() để xoay phần tử theo trục y (trục đứng) và sử dụng rotateZ() theo trục z, khá giống với transform 2D
Transition
Thuộc tính transition giúp quá trình thay đổi giá trị của thuộc tính khác (trong cùng một phần tử) khi rê chuột qua :hover một cách mượt mà, trong một khoảng thời gian quy định
transition: width 2scác thuộc tính con được chia nhỏ để kiểm soát toàn bộ quá trình transition
transition-property quy định thuộc tính nào sẽ được áp dụng transition
transition-duration thiết lập khoảng thời gian diễn ra transition
transition-delay thiết lập khoảng thời gian trước khi diễn ra transition
transition-timing-function thiết lập tốc độ của sự thay đổi, và nhận các giá trị sau ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n). Cụ thể bạn có thể test hoặc tra google nhé
Share this:
Like this:
Like
Loading…
