Thuộc tính transform trong CSS

Thuộc tính transform trong CSS

Thuộc tính transform trong CSS

Thuộc tính transform cho phép bạn thao tác trực quan một phần tử bằng cách xiên, xoay, dịch hoặc chia tỷ lệ: Ví dụ transform trong CSS .ele...
Comment tháng 10 24, 2021

Thuộc tính transform cho phép bạn thao tác trực quan một phần tử bằng cách xiên, xoay, dịch hoặc chia tỷ lệ:

Ví dụ transform trong CSS

.element {
    width20px;
    height20px;
    transformscale(20);
  }
 

 Ngay cả với chiều cao và chiều rộng đã khai báo, phần tử này bây giờ sẽ được thu nhỏ thành hai mươi lần kích thước ban đầu của nó:

Tìm hiểu những Value transform css

  • scale (): Ảnh hưởng đến kích thước của phần tử. Điều này cũng áp dụng cho kích thước phông chữ, phần đệm, chiều cao và chiều rộng của một phần tử. Nó cũng là một hàm viết tắt cho các hàm scaleX và scaleY.
  • skewX() and skewY():  Nghiêng một phần tử sang trái hoặc phải, giống như biến hình chữ nhật thành hình bình hành. xiên () là cách viết tắt kết hợp giữa xiên () và xiên Y bằng cách chấp nhận cả hai giá trị.
  • translate (): Di chuyển một phần tử sang một bên hoặc lên và xuống.
  • rotate(): Xoay phần tử theo chiều kim đồng hồ từ vị trí hiện tại của nó.
  • matrix (): Một hàm có thể không được dùng để viết bằng tay, nhưng kết hợp tất cả các phép biến đổi thành một.
  • perspective(): Không ảnh hưởng đến bản thân phần tử, nhưng ảnh hưởng đến các phép biến đổi 3D của các phần tử con, cho phép tất cả chúng có góc nhìn chiều sâu nhất quán. 

 Thuộc tính Skew trong CSS

Các hàm SkewX và SkewY làm nghiêng một phần tử theo cách này hay cách khác. Hãy nhớ rằng: không có thuộc tính viết tắt nào để làm lệch một phần tử, vì vậy bạn sẽ cần sử dụng cả hai hàm. Trong ví dụ dưới đây, chúng ta có thể xiên một hình vuông 100px x 100px sang trái và phải bằng skew:

/* Skew points along the x-axis */
.element {
    transformskewX(25deg);
  }
  
  /* Skew point along the y-axis */
  .element {
    transformskewY(25deg);
  }
  
  /* Skew points along the x- and y-axis */
  .element {
    transformskew(25deg25deg);
  }

Ví dụ SkewX trong CSS

<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div> 

CSS

.element {
    displayinline-block;
    background-color#0074d9;
    height100px;
    width100px;
    font-size1px;
    padding1px;
    colorwhite;
    margin-right5px;
    margin-left5px;
    animation: skew 3s infinite;
    transformskew(20deg);
    animation-directionalternate;
    opacity.7;
  }
  
  @keyframes skew {
    0% {
      transformskewX(20deg);
    }
    100% {
      transformskewX(-20deg);
    }
  }
  
  
  bodyhtml {
    height100%;
  }
  
  
  body {
    displayflex;
    align-itemscenter;
    justify-contentcenter;
  }

Bây giờ dưới đây là ví dụ skewX và skewY:

 

Rotate

.element {
  transform: rotate(25deg);
}

Thao tác này sẽ xoay một phần tử theo chiều kim đồng hồ từ vị trí ban đầu của nó, trong khi một giá trị âm sẽ xoay phần tử đó theo hướng ngược lại. Dưới đây là một ví dụ động đơn giản trong đó hình vuông tiếp tục xoay 360 độ sau mỗi ba giây:

 

 

Translate

.element {
  transform: translate(20px, 10px);
}

Hàm Translate này di chuyển một phần tử sang ngang hoặc lên và xuống. Tại sao không chỉ sử dụng trên / trái / dưới / phải? Chà, đôi khi hơi khó hiểu. Tôi sẽ nghĩ về những thứ đó như bố cục / định vị (dù sao thì chúng cũng có hỗ trợ trình duyệt tốt hơn) và đây là một cách để di chuyển những thứ đó xung quanh như một phần của quá trình chuyển đổi hoặc hoạt ảnh.

Các giá trị này sẽ là bất kỳ giá trị độ dài nào, như 10px hoặc 2,4em. Một giá trị sẽ di chuyển phần tử sang bên phải (các giá trị âm ở bên trái). Nếu giá trị thứ hai được cung cấp, giá trị thứ hai đó sẽ di chuyển nó xuống (giá trị âm lên). Hoặc, bạn có thể nhận được cụ thể:

Blogger Comments


Không có nhận xét nào. Chúc mừng bạn là người đầu tiên.

  • Kí tự đặc biệt
  • Tôi Share
  • Star Mạnh Blog
  • Văn Tuấn Blog
  • Tuổi Trẻ IT
  • Văn Thắng Blog
  • Duy Blogs
  • Star Sinh Blog
  • Lê Bá Long IT
  • Đặt liên kết
  • Đặt liên kết
  • Đặt liên kết