Bạn đã bao giờ tự hỏi làm thế nào mà ba dấu chấm trên một trang web lại nhấp nháy nhanh như vậy? Thuộc tính CSS Transforms and Transitions có thể làm được điều này! Thuộc tính CSS Transform áp dụng chuyển động, xoay, nghiêng và chia tỷ lệ cho các phần tử HTML ở dạng 2D hoặc 3D. Thuộc tính chuyển đổi giúp thay đổi diễn ra thuận lợi và nhanh chóng.
Nếu bạn đang cố gắng làm cho dự án của mình trở nên tương tác, bạn nên biết về cặp đôi quyền lực này để giữ cho hoạt ảnh của bạn nhất quán và khó nắm bắt. Tốt nhất là tránh các vấn đề về khả năng tương thích giữa các trình duyệt có thể làm phức tạp thiết kế của bạn.
Vậy, sự khác biệt giữa CSS Transform và CSS Transition là gì? Thuộc tính Transform trong CSS di chuyển hoặc sửa đổi giao diện của một phần tử, trong khi thuộc tính Transition chuyển đổi liền mạch và nhẹ nhàng phần tử từ trạng thái này sang trạng thái khác.
Xem thêm Kiểm tra lỗ hổng bảo mật CSS Injection
Trong blog này, chúng tôi sẽ đi sâu vào các thuộc tính Chuyển đổi và Chuyển đổi CSS sẽ giúp bạn trong việc tạo các hình ảnh động đơn giản và thú vị với ít dòng mã hơn.
Hãy bắt đầu với CSS Transform và Transition!
Thuộc tính CSS Transform
Thuộc tính chuyển đổi trong CSS được gọi khi có sự thay đổi về trạng thái của phần tử HTML. Bạn có thể xoay, xiên, di chuyển và chia tỷ lệ các phần tử. Nó xảy ra khi trạng thái của một phần tử được sửa đổi, như khi bạn di chuột qua một nút hoặc thực hiện một cú nhấp chuột. Chúng ta sẽ xem cách này hoạt động như thế nào trong các phần tiếp theo của blog này.
Có ba biến thể của thuộc tính CSS Transform trong 2D.
- transform: TpropertyX(x);
- transform: TpropertyY(y);
- transform : Tproperty(x,y);
Ở đây Tproperty đề cập đến thuộc tính phần tử mà bạn muốn thay đổi, x và y có thể là giá trị âm hoặc dương. Thuộc tính CSS Transform trong 3D bao gồm trục Z. X là chiều rộng, Y là chiều cao và Z là chiều sâu của màn hình.
Xem thêm CSS là gì? cách hoạt động và cách học CSS
Translate
Thuộc tính Translate thay đổi vị trí trái / phải và lên / xuống của phần tử trên trang dựa trên các tham số trục X (ngang) và Y (dọc) đã cho. Tham số trục X dương sẽ di chuyển phần tử sang bên phải và giá trị âm sẽ di chuyển phần tử sang bên trái. Tham số trục Y dương di chuyển phần tử xuống và dương sẽ di chuyển phần tử lên trên.
<div class="container"> <h3>Hover!</h3> <div id="box"></div> </div>
#box { width: 120px; height: 120px; background-color: rgba(55, 255, 5, 0.582); border-radius: 12px; border: solid rgb(110, 235, 110) 4px; } #box :hover{ transform: translate(100%,60%);}
Trong ví dụ trên, hộp sẽ di chuyển từ vị trí ban đầu sang phải 100% và xuống 60% vì cả hai đều là các tham số dương.
Skew
Skew nghiêng phần tử về một hướng dựa trên các tham số được cung cấp cho các trục X và Y của nó. Tham số X dương nghiêng về bên phải và tiêu cực nghiêng về bên trái. Đồng thời, cực dương Y nghiêng nó xuống và âm dương nghiêng nó lên trên.
<div class="container"> <h3>Hover!</h3> <div id="box"></div> </div>
#box { width: 120px; height: 120px; background-color: rgba(246, 200, 250, 0.932); border-radius: 12px; border: solid rgb(246, 169, 253) 4px; } #box :hover{ transform: skew(30deg,30deg);
Trong ví dụ trên, hộp đã được nghiêng sang phải và hướng lên trên vì cả hai đều là các tham số dương.
Nếu bạn xiên một phần tử, nó cũng sẽ xiên tất cả các phần tử con tồn tại bên trong phần tử đó. Nếu chúng ta cần duy trì góc ban đầu của một phần tử con, chúng ta sẽ phải sử dụng giá trị đối lập của xiên để giữ nguyên giá trị ban đầu.
Xem thêm Object trong JavaScript
Scale
Quy mô có thể tăng hoặc giảm kích thước của một phần tử HTML dựa trên các tham số đã cho. Giá trị dương tăng kích thước theo hướng X hoặc Y, trong khi giá trị âm giảm kích thước theo hướng X hoặc Y.
Nói một cách đơn giản, new_size = tham số * original_size;
<div class="container"> <h3>Hover!</h3> <div id="box"></div> </div>
#box { width: 120px; height: 120px; background-color: rgba(172, 221, 243, 0.842); border-radius: 12px; border: solid rgb(172, 221, 243) 4px; } #box :hover{ transform: scale(0.5);}
Trong ví dụ trên, kích thước hộp đã được thu nhỏ xuống một nửa so với kích thước ban đầu.
Rotate
Thuộc tính Rotate có thể xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ dựa trên một số độ được chỉ định. Mức độ dương sẽ quay phần tử theo hướng ngược chiều kim đồng hồ và tham số âm sẽ quay phần tử theo chiều kim đồng hồ.
Trong ví dụ trên, hộp được xoay 25 độ ngược chiều kim đồng hồ vì tham số là dương.
Ngoài những điều này, chúng ta có thể kết hợp nhiều thuộc tính CSS Transform cho một phần tử. Bạn sẽ cần chỉ định các thuộc tính mà bạn muốn thay đổi.
xem thêm Content-Section element trong html
Ví dụ: biến đổi: prop1 (tham số) prop2 (tham số);
Chúng ta hãy xem một ví dụ. Tôi đã thêm thuộc tính chuyển tiếp ở đây. Chúng ta sẽ biết thêm về nó trong các phần sắp tới.
<div class="container"> <h3>Hover!</h3> <div id="box"></div> </div>
#box{ width: 120px; height: 120px; background-color: rgba(247, 169, 169, 0.788); border-radius: 12px; border: solid rgb(247, 169, 169) 4px; transition: all 0.7s ease; } #box:hover{ transform: rotate(120deg) scale(1.5) translateY(-100px); }
Các phép biến đổi mà không cần thêm các phép chuyển đổi xảy ra nhanh chóng trong một phần nhỏ của giây. Chúng tôi sẽ khắc phục điều này trong phần tiếp theo bằng cách thêm một số chuyển đổi cho giống nhau.
Khả năng tương thích trình duyệt của các chuyển đổi CSS
Hãy để chúng tôi xem xét khả năng tương thích của thuộc tính CSS Transform trên các trình duyệt khác nhau.
Thuộc tính Transitions CSS
Trong CSS thì thuộc tính transitions giúp đỡ các developer điều khiển tốc độ xảy ra hiệu ứng trong CSS khi thay đổi thuộc tính trong CSS.
Chúng tôi đã thấy các thuộc tính CSS Transform khác nhau thay đổi trạng thái của phần tử theo cách trực quan như thế nào. Bây giờ, thuộc tính Transition thêm một mức độ dần dần vào trạng thái đã thay đổi đó. Quá trình chuyển đổi sẽ trở nên suôn sẻ trong một khoảng thời gian nhất định.
Ba thuộc tính chính được yêu cầu để quá trình chuyển đổi có hiệu lực:
- transition-property
- transition-duration
- transition-timing
Bạn phải chỉ định thuộc tính của phần tử bạn muốn thay đổi và khoảng thời gian mà thay đổi đó sẽ diễn ra. Chức năng định thời và thuộc tính trễ là tùy chọn.
div { transition: [property] [duration] [timing-function] [delay]; }
transition-property
Thuộc tính chuyển tiếp xác định thuộc tính CSS mà quá trình chuyển đổi qua phần tử sẽ được áp dụng. Chúng tôi cũng có thể áp dụng chuyển đổi cho một thuộc tính (ví dụ: màu nền hoặc chuyển đổi) hoặc cho tất cả các thuộc tính trong bộ quy tắc.
div { transition-property: all; transition-property: transform; }
transition-duration
Thuộc tính thời lượng chuyển tiếp xác định khoảng thời gian của quá trình chuyển đổi qua phần tử. Chúng tôi có thể chỉ định bằng giây hoặc mili giây.
div { transition-duration: 4s; }
<div class="wrap"> <div class="container"> <h1>300ms</p> <div class="box1 box"></div> </div> <div class="container"> <h1>1s</p> <div class="box2 box"></div> </div> <div class="container"> <h1>3s</p> <div class="box3 box"></div> </div> </div>
.wrap { margin: 50px; } .container { display: inline-block; width: 150px; } h1 { color: lightgray; font-family: lato; font-size: 20px; font-weight: 200; padding: 20px; text-align: center; } .box { border-radius: 50%; height: 40px; margin: 50px auto; width: 40px; .wrap:hover & { transform: scale(2); } } .box1 { background: #60D4C8; transition: all 300ms; } .box2 { background: #46BAAF; transition: all 1s; } .box3 { background: #3EA69B; transition: all 3s; }
Hãy xem xét ví dụ về Chuyển đổi quy mô với thuộc tính Chuyển đổi được thêm vào.
.square { background: darkturquoise; border-radius: 5px; height: 100px; margin: 100px; transition: transform 1s; width: 100px; &:hover { transform: scale(2); } }
transition-timing
Thuộc tính chức năng thời gian chuyển tiếp chỉ định tốc độ của quá trình chuyển đổi trong suốt thời lượng của phần tử. Thời gian mặc định rất dễ dàng, bắt đầu từ từ, tăng tốc ngay lập tức, sau đó giảm dần ở cuối.
Các tùy chọn thời gian khác bao gồm dễ dàng, dễ dàng vào, dễ dàng ra, dễ dàng vào và tuyến tính.
Dưới đây là ví dụ về các tùy chọn thời gian khác nhau (được sử dụng với thuộc tính biến đổi).
<div class="container"> <div class="circle0"></div> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div>
.container { margin: 100px; } .circle { border-radius: 50%; height: 30px; width: 30px; margin: 10px; .container:hover & { transform: translateX(200px); } } .circle0 { @extend .circle; background: PaleTurquoise; transition: all 1.5s linear; } .circle1 { @extend .circle; background: salmon; transition: all 1.5s ease; } .circle2 { @extend .circle; background: lightskyblue; transition: all 1.5s ease-in; } .circle3 { @extend .circle; background: khaki; transition: all 1.5s ease-out; } .circle4 { @extend .circle; background: mediumturquoise; transition: all 1.5s ease-in-out; } .circle5 { @extend .circle; background: thistle; transition: all 1.5s cubic-bezier(0,1,.98,0); }
Như chúng ta có thể thấy, hộp giảm dần tỷ lệ dưới một giây.
Bạn có thể chỉ định một loại chuyển đổi duy nhất cho tất cả thuộc tính như được hiển thị trong ví dụ hoặc bạn có thể chỉ định các chuyển đổi khác nhau cho từng thuộc tính như sau:
transition: p1 d1, p2 d2,…, pn dn;
Trong đó pn chỉ định tên thuộc tính và dn chỉ định thời lượng.
Bây giờ, hãy xem cách chúng tôi có thể thử và làm cho quá trình chuyển đổi hoạt động trên tất cả các trình duyệt. Chúng tôi sẽ sử dụng tiền tố của nhà cung cấp cho cùng một.
Hãy xem xét ví dụ trên, đây là cách nó trông như thế nào đối với các tiền tố của nhà cung cấp:
Đây -webkit cho Chrome, Safari; -moz cho Firefox, -o cho Opera.
#box { width: 120px; height: 120px; background-color: rgb(140, 212, 245); -webkit-transition: all 1s; -moz-transition: all 1s ; -o-transition: all 1s ; transition: all 1s; } #box :hover{ transform: scale(0.5);}
Việc chỉ định tiền tố của nhà cung cấp đảm bảo rằng quá trình chuyển đổi hoạt động tức thì trên các trình duyệt thường được đối tượng mục tiêu sử dụng.
Khả năng tương thích với trình duyệt của thuộc tính CSS Transition
Hãy xem xét khả năng tương thích của CSS Transition trên các trình duyệt.
Việc kiểm tra tính tương thích giữa các trình duyệt của trang web của bạn thay vì lưu trữ nó trên mỗi trình duyệt web có thể rất phức tạp. Không thể tải xuống và cài đặt một loạt trình duyệt và phiên bản trình duyệt cho thiết bị mục tiêu hoặc hệ điều hành.
Xem thêm Selenium IDE- xác định phần tử html cho testing website
Một số câu hỏi phổ biến về CSS Transform và Transition
- CSS Transform là gì? CSS Transform là một tính năng trong CSS cho phép bạn thay đổi hình dạng, kích thước, vị trí và hướng của các phần tử HTML một cách tương đối đơn giản và hiệu quả.
- CSS Transition là gì? CSS Transition cho phép bạn xác định các thay đổi trạng thái của các phần tử HTML và tạo hiệu ứng chuyển động mượt mà khi trạng thái này chuyển đổi sang trạng thái khác.
- Có bao nhiêu loại CSS Transform? CSS Transform bao gồm các loại như: translate, rotate, scale, skew, matrix và perspective.
- Có bao nhiêu loại CSS Transition? CSS Transition bao gồm transition-property, transition-duration, transition-timing-function và transition-delay.
- Làm thế nào để sử dụng CSS Transform và Transition trong CSS? Bạn có thể sử dụng các thuộc tính transform và transition trong CSS để tạo hiệu ứng chuyển động cho các phần tử HTML. Ví dụ: để xoay một phần tử HTML 45 độ, bạn có thể sử dụng thuộc tính transform: rotate(45deg); và để tạo hiệu ứng chuyển động mượt mà cho phần tử này, bạn có thể sử dụng thuộc tính transition: transform 0.5s ease-in-out;.
- Thuộc tính transition-duration làm gì? Thuộc tính transition-duration được sử dụng để xác định thời gian hoàn thành của hiệu ứng chuyển động. Bạn có thể đặt giá trị cho thuộc tính này bằng đơn vị giây hoặc mili giây.
- Thuộc tính transition-timing-function làm gì? Thuộc tính transition-timing-function được sử dụng để xác định cách thức áp dụng hiệu ứng chuyển động. Nó giúp kiểm soát tốc độ của hiệu ứng và làm cho chuyển động trở nên mượt hơn. Có nhiều giá trị được hỗ trợ, từ tốc độ đều nhau cho đến giảm dần hoặc tăng dần.
- Thuộc tính transition-property làm gì? Thuộc tính transition-property được sử dụng để xác định thuộc tính nào trên phần tử HTML sẽ thay đổi để tạo hiệu ứng chuyển động. Nó có thể là một thuộc tính đơn lẻ hoặc một danh sách các thuộc tính được phân tách bằng dấu phẩy.
- Thuộc tính transition-delay làm gì? Thuộc tính transition-delay được sử dụng để xác định thời gian trễ trước khi bắt đầu thực hiện hiệu ứng chuyển động. Bạn có thể đặt giá trị cho thuộc tính này bằng đơn vị giây hoặc mili giây.
- Tại sao nên sử dụng CSS Transform và Transition? Sử dụng CSS Transform và Transition là cách hiệu quả để thêm tính năng tương tác và tạo ra các hiệu ứng động cho các phần tử HTML. Điều này giúp tăng tính hấp dẫn của trang web và cải thiện trải nghiệm người dùng. Bên cạnh đó, CSS Transform và Transition cũng giúp cho các phần tử HTML trông chuyên nghiệp hơn và tăng tính khả giải quyết của trang web.
- Có thể sử dụng CSS Transform và Transition trên bất kỳ phần tử HTML nào không? CSS Transform và Transition có thể được áp dụng trên hầu hết các phần tử HTML, bao gồm hình ảnh, văn bản, nút, tiêu đề và các phần tử khác. Tuy nhiên, nó không hoạt động trên tất cả các trình duyệt web và một số tính năng có thể không được hỗ trợ trên một số trình duyệt.
- Có thể sử dụng nhiều hiệu ứng chuyển động cho cùng một phần tử HTML không? Có thể, bạn có thể sử dụng nhiều hiệu ứng chuyển động cho cùng một phần tử HTML bằng cách định nghĩa các giá trị khác nhau cho thuộc tính transition-property hoặc sử dụng nhiều thuộc tính transform khác nhau.
- Có thể sử dụng JavaScript để điều khiển CSS Transform và Transition không? Có thể, bạn có thể sử dụng JavaScript để thay đổi giá trị của các thuộc tính transform và transition trong CSS. Điều này cho phép bạn tạo ra các hiệu ứng chuyển động động và tương tác một cách động bằng cách tương tác với các phần tử HTML.
- Có bao nhiêu giá trị được hỗ trợ cho thuộc tính transition-timing-function? Thuộc tính transition-timing-function hỗ trợ nhiều giá trị như: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier và steps.
- CSS Transform và Transition có phải là các công nghệ mới không? Không, CSS Transform và Transition đã được giới thiệu vào năm 2009, cùng với phiên bản CSS3. Tuy nhiên, chúng vẫn được sử dụng phổ biến và được xem là một phần không thể thiếu của các trang web hiện đại.
Xem thêm CSS trong React