Rate this post

Bạn đã khi nào tự hỏi làm thế nào mà ba dấu chấm trên một website lại nhấp nháy nhanh như vậy ? Thuộc tính CSS Transforms and Transitions hoàn toàn có thể làm được điều này ! Thuộc tính CSS Transform vận dụng hoạt động, xoay, nghiêng và chia tỷ suất cho những thành phần HTML ở dạng 2D hoặc 3D. Thuộc tính quy đổi giúp đổi khác diễn ra thuận tiện và nhanh gọn .
Nếu bạn đang nỗ lực làm cho dự án Bất Động Sản của mình trở nên tương tác, bạn nên biết về đôi bạn trẻ quyền lực tối cao này để giữ cho hoạt ảnh của bạn đồng điệu và khó chớp lấy. Tốt nhất là tránh những yếu tố về năng lực thích hợp giữa những trình duyệt hoàn toàn có thể làm phức tạp phong cách thiết kế của bạn .
Xem thêm Global attribute trong html
Vậy, sự độc lạ giữa CSS Transform và CSS Transition là gì ? Thuộc tính Transform trong CSS vận động và di chuyển hoặc sửa đổi giao diện của một thành phần, trong khi thuộc tính Transition quy đổi liền lạc và nhẹ nhàng thành phần 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 thông tin CSS Injection

Trong blog này, chúng tôi sẽ đi sâu vào những thuộc tính Chuyển đổi và Chuyển đổi CSS sẽ giúp bạn trong việc tạo những hình ảnh động đơn thuần và mê hoặc với ít dòng mã hơn .
Hãy khởi đầu với CSS Transform và Transition !

Thuộc tính CSS Transform

Thuộc tính quy đổi trong CSS được gọi khi có sự đổi khác về trạng thái của thành phần HTML. Bạn hoàn toàn có thể xoay, xiên, chuyển dời và chia tỷ suất những thành phần. Nó xảy ra khi trạng thái của một thành phần được sửa đổi, như khi bạn di chuột qua một nút hoặc thực thi một cú nhấp chuột. Chúng ta sẽ xem cách này hoạt động giải trí như thế nào trong những 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 .

1. transform: TpropertyX(x);
2. transform: TpropertyY(y);
3. transform : Tproperty(x,y);

Ở đây Tproperty đề cập đến thuộc tính thành phần mà bạn muốn đổi khác, x và y hoàn toàn có thể là giá trị âm hoặc dương. Thuộc tính CSS Transform trong 3D gồm có 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 hiển thị .
Xem thêm CSS là gì ? cách hoạt động giải trí và cách học CSS

Translate

Thuộc tính Translate biến hóa vị trí trái / phải và lên / xuống của thành phần trên trang dựa trên những tham số trục X ( ngang ) và Y ( dọc ) đã cho. Tham số trục X dương sẽ vận động và di chuyển thành phần sang bên phải và giá trị âm sẽ chuyển dời thành phần sang bên trái. Tham số trục Y dương chuyển dời thành phần xuống và dương sẽ vận động và di chuyển thành phần lên trên .

 

        
Hover!
        

#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ẽ chuyển dời từ vị trí bắt đầu sang phải 100 % và xuống 60 % vì cả hai đều là những tham số dương .

Skew

Skew nghiêng thành phần về một hướng dựa trên những tham số được cung ứng cho những trục X và Y của nó. Tham số X dương nghiêng về bên phải và xấu đi nghiêng về bên trái. Đồng thời, cực dương Y nghiêng nó xuống và âm khí và dương khí nghiêng nó lên trên .

        
Hover!
        

#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à những tham số dương .
Nếu bạn xiên một thành phần, nó cũng sẽ xiên toàn bộ những thành phần con sống sót bên trong thành phần đó. Nếu tất cả chúng ta cần duy trì góc khởi đầu của một thành phần con, tất cả chúng ta sẽ phải sử dụng giá trị trái chiều của xiên để giữ nguyên giá trị bắt đầu .
Xem thêm Object trong JavaScript

Scale

Quy mô hoàn toàn có thể tăng hoặc giảm kích cỡ của một thành phần HTML dựa trên những tham số đã cho. Giá trị dương tăng kích cỡ theo hướng X hoặc Y, trong khi giá trị âm giảm kích cỡ theo hướng X hoặc Y .
Nói một cách đơn thuần, new_size = tham số * original_size ;

        
Hover!
        

#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 cỡ hộp đã được thu nhỏ xuống 50% so với kích cỡ bắt đầu .

Rotate

Thuộc tính Rotate hoàn toàn có thể xoay một thành phần theo chiều kim đồng hồ đeo tay hoặc ngược chiều kim đồng hồ đeo tay dựa trên 1 số ít độ được chỉ định. Mức độ dương sẽ quay thành phần theo hướng ngược chiều kim đồng hồ đeo tay và tham số âm sẽ quay thành phần theo chiều kim đồng hồ đeo tay .
Trong ví dụ trên, hộp được xoay 25 độ ngược chiều kim đồng hồ đeo tay 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ụ : đổi khác : 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 những phần sắp tới .

        
Hover!
        

    

#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 hóa mà không cần thêm những phép quy đổi xảy ra nhanh gọn 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 1 số ít quy đổ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 năng lực thích hợp của thuộc tính CSS Transform trên những trình duyệt khác nhau .

Thuộc tính Transitions CSS

Chúng tôi đã thấy những thuộc tính CSS Transform khác nhau đổi khác trạng thái của thành phần theo cách trực quan như thế nào. Bây giờ, thuộc tính Transition thêm một mức độ từ từ vào trạng thái đã biến hóa đó. Quá trình quy đổi sẽ trở nên suôn sẻ trong một khoảng chừng thời hạn nhất định .
Ba thuộc tính chính được nhu yếu để quy trình quy đổi có hiệu lực hiện hành :

1. transition-property
2. transition-duration
3. transition-timing

Bạn phải chỉ định thuộc tính của thành phần bạn muốn biến hóa và khoảng chừng thời hạn mà đổi khác đó 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 lập thuộc tính CSS mà quy trình quy đổi qua thành phần sẽ được vận dụng. Chúng tôi cũng hoàn toàn có thể vận dụng quy đổi cho một thuộc tính ( ví dụ : màu nền hoặc quy đổi ) hoặc cho tổng thể những 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 lập khoảng chừng thời hạn của quy trình quy đổi qua thành phần. Chúng tôi hoàn toàn có thể chỉ định bằng giây hoặc mili giây .

div { transition-duration: 4s; }

  

    
300ms

.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;
}

.square {
  background: darkturquoise;
  border-radius: 5px;
  height: 100px;
  margin: 100px;
  transition: transform 1s;
  width: 100px;
  
  &:hover {
    transform: scale(2);
  }
}

.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); 
}

#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);}

Xem thêm: Top 20 bài tập xử lý chuỗi trong java hay nhất 2022

Source: https://final-blade.com
Category: Kiến thức Internet