search

Nhiều biến đổi CSS

Ngày đăng: 19/12/2022
Trả lời: 0
Lượt xem: 104

Phương thức 

<style>
  Show
  
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
7 di chuyển một phần tử từ vị trí hiện tại của nó (theo các tham số đã cho cho trục X và trục Y)

Ví dụ sau di chuyển

phần tử 50 pixel ở bên phải và 100 pixel xuống từ vị trí hiện tại của nó

Phương thức xoay ()

Nhiều biến đổi CSS

Phương pháp 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
8 xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ theo một mức độ nhất định

Ví dụ sau xoay vòng

phần tử theo chiều kim đồng hồ với 20 độ

Sử dụng các giá trị âm sẽ xoay phần tử ngược chiều kim đồng hồ

Ví dụ sau xoay vòng

phần tử ngược chiều kim đồng hồ với 20 độ

Phương thức scale()

Nhiều biến đổi CSS

Phương thức 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
9 tăng giảm kích thước của phần tử (tuỳ theo tham số cho chiều rộng và chiều cao)

Ví dụ sau đây làm tăng

phần tử gấp hai lần chiều rộng ban đầu và ba lần chiều cao ban đầu.  

Ví dụ sau giảm

phần tử bằng một nửa chiều rộng và chiều cao ban đầu của nó.  

Phương thức scaleX()

Phương thức 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
0 tăng hoặc giảm độ rộng của một phần tử

Ví dụ sau đây làm tăng

phần tử gấp hai lần chiều rộng ban đầu của nó.  

Ví dụ sau giảm

phần tử bằng một nửa chiều rộng ban đầu của nó.  

Phương thức scaleY()

Phương thức 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
1 tăng hoặc giảm chiều cao của một phần tử

Ví dụ sau đây làm tăng

phần tử gấp ba lần chiều cao ban đầu của nó.  

Ví dụ sau giảm

phần tử bằng một nửa chiều cao ban đầu của nó.  

Phương thức skewX()

Phương pháp 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
2 nghiêng một phần tử dọc theo trục X theo góc đã cho

Ví dụ sau làm lệch

phần tử 20 độ dọc theo trục X

Phương thức skewY()

Phương pháp 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
3 nghiêng một phần tử dọc theo trục Y theo góc đã cho

Ví dụ sau làm lệch

phần tử 20 độ dọc theo trục Y

Phương thức skew()

Phương pháp 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
4 nghiêng một phần tử dọc theo trục X và Y theo các góc đã cho

Ví dụ sau làm lệch

phần tử 20 độ dọc theo trục X và 10 độ dọc theo trục Y

Nếu tham số thứ hai không được chỉ định, nó có giá trị bằng không. Vì vậy, ví dụ sau làm lệch

phần tử 20 độ dọc theo trục X

Phương thức ma trận()

Nhiều biến đổi CSS

Phương thức 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
50 kết hợp tất cả các phương thức biến đổi 2D thành một

Phương thức matrix() nhận sáu tham số, chứa các hàm toán học, cho phép bạn xoay, chia tỷ lệ, di chuyển (dịch) và nghiêng các phần tử

Các thông số như sau. ma trận(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Thoạt nhìn, nó có vẻ giống như một thứ khá thích hợp. Rốt cuộc thì chúng ta cần xoay hoặc nghiêng thứ gì đó bao lâu một lần? . Trong cơ sở mã blog của tôi, tôi đã sử dụng thuộc tính 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
5 hơn 350 lần

Trong bài đăng trên blog này, chúng tôi đang tìm hiểu sâu về tài sản 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
5. Tôi sẽ cho bạn thấy một số điều thú vị và bất ngờ mà bạn có thể làm với nó

Đối tượng dự định

Hướng dẫn này nhằm mục đích thân thiện với người mới bắt đầu, mặc dù tôi cho rằng bạn đã quen thuộc với các nguyên tắc cơ bản của HTML/CSS

Trừ khi bạn là một chuyên gia CSS dày dạn kinh nghiệm, tôi cá là bạn sẽ học được điều gì đó thú vị

Liên kết đến tiêu đề nàyBiến đổi chức năng

Thuộc tính 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
5 có thể thực hiện rất nhiều việc khác nhau, thông qua việc sử dụng các hàm biến đổi như 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
0 và 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
1

Hãy lần lượt xem xét từng

Liên kết đến tiêu đề nàyDịch

Bản dịch cho phép chúng tôi di chuyển một mục xung quanh

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
2

x. 0px

y. 0px

Chúng ta có thể sử dụng 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
0 để dịch chuyển một mục theo một trong hai trục. 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
4 di chuyển sang bên, 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
5 di chuyển lên xuống. Các giá trị dương di chuyển xuống dưới và sang phải. Các giá trị âm di chuyển lên và sang trái

Điều quan trọng là vị trí trong luồng của mặt hàng không thay đổi. Đối với các thuật toán bố cục của chúng tôi, từ Flow đến Flexbox đến Grid, thuộc tính này không có tác dụng

Ví dụ. trong hình ảnh này, chúng ta có 3 đứa trẻ được căn chỉnh bằng Flexbox. Khi chúng tôi áp dụng một phép biến đổi cho phần tử con ở giữa, thuật toán Flexbox không nhận thấy và giữ các phần tử con khác ở cùng một vị trí

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
2

x. 0px

y. 0px

Điều này tương tự như cách hoạt động của 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
7 / 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
8 / 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
9 / 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
00 trong bố cục được định vị, với các phần tử được định vị tương đối

Khi chúng ta muốn di chuyển một phần tử dọc theo một trục, chúng ta có thể sử dụng 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
01 và 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
02

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
3

Tuy nhiên, có một điều khiến 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
0 trở nên mạnh mẽ một cách lố bịch. Một cái gì đó hoàn toàn độc đáo trong ngôn ngữ CSS

Khi chúng tôi sử dụng giá trị phần trăm trong 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
0, phần trăm đó đề cập đến kích thước riêng của phần tử, không phải không gian có sẵn trong vùng chứa chính

Ví dụ

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
05

x. 0%

y. 0%

Đặt 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
06 sẽ di chuyển hộp lên theo chiều cao chính xác của nó, bất kể chiều cao đó là bao nhiêu, tới pixel

Điều này cực kỳ tiện lợi khi chúng ta muốn một phần tử nằm ngay bên ngoài một phần tử khác

sân chơi mật mã

Định dạng mã bằng cách sử dụng Prettier

đặt lại mã

CSS HTML

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>

Kết quả

Làm mới khung kết quả

Bật phím 'tab'

Tại sao điều này rất mát mẻ?

Bạn có thể tự hỏi tại sao đây là một vấn đề lớn như vậy. Rốt cuộc, bố cục trên có thể được tạo bằng Flexbox hoặc Grid, phải không?

Chà, không hẳn

Cho xem nhiều hơn

Trường hợp sử dụng phổ biến cho thủ thuật này là thêm nút "đóng" ngay bên ngoài hộp thoại

sân chơi mật mã

Định dạng mã bằng cách sử dụng Prettier

đặt lại mã

CSS HTML

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
0

Kết quả

Làm mới khung kết quả

Bật phím 'tab'

Với sự kỳ diệu của 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
09, chúng ta thậm chí có thể trộn lẫn các đơn vị tương đối và tuyệt đối

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
30

Tỷ lệ phần trăm. 0%

Điểm ảnh. 0px

Điều này cho phép chúng tôi thêm một "bộ đệm" để chúng tôi có thể dịch nội dung nào đó theo kích thước của chính nó cộng với một vài pixel bổ sung

Liên kết đến tiêu đề nàyTỉ lệ

Được rồi, hãy xem một hàm biến đổi khác

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
31 cho phép chúng tôi phát triển hoặc thu nhỏ một phần tử

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
32

Tỷ lệ. 1

Tỷ lệ sử dụng một giá trị không có đơn vị đại diện cho bội số, tương tự như 

<style>
  .parent {
    position: relative;
  }




 .child {
 width: 50px;
 height: 50px;
 /*
 Put the child in the
 top-right corner…
 */
 position: absolute;
 top: 0;
 right: 0;
 
 /*
 …and then shift it up to
 sit just outside:
 */
 transform: translateY(-100%);
 }
style>
<div class="parent">
 <div class="child">div>
div>
33. 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
34 có nghĩa là phần tử phải lớn gấp 2 lần bình thường

Chúng ta cũng có thể chuyển nhiều giá trị để chia tỷ lệ trục 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
4 và 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
5 một cách độc lập

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
37

x. 1

y. 1

Thoạt nhìn, điều này có vẻ tương đương với cài đặt 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
38 và 
<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
39, nhưng có một sự khác biệt lớn

Kiểm tra xem điều gì sẽ xảy ra khi phần tử của chúng ta có một số văn bản trong đó

Chào thế giới

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
32

Tỷ lệ. 1

Văn bản tăng và giảm tỷ lệ với phần tử. Chúng tôi không chỉ chuyển đổi kích thước và hình dạng của hộp, chúng tôi đang chuyển đổi toàn bộ phần tử và tất cả các hậu duệ của nó

Một cơ chế khác

Điều này tiết lộ một sự thật quan trọng về biến đổi. các yếu tố được làm phẳng thành một kết cấu. Tất cả các phép biến đổi này về cơ bản coi phần tử của chúng ta giống như một hình ảnh phẳng, làm cong vênh và biến dạng nó như bạn có thể làm trong Photoshop

Ngẫu nhiên, đây là điều làm cho 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
5 trở thành một lựa chọn tốt cho hoạt hình

Hãy suy nghĩ về bao nhiêu công việc được yêu cầu khi chúng tôi thay đổi một cái gì đó như 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
38. Tất cả các thuật toán bố cục cần chạy lại, tìm ra chính xác vị trí của phần tử này và tất cả các phần tử anh chị em của nó. Nếu phần tử có văn bản bên trong, thuật toán ngắt dòng cần tìm hiểu xem chiều rộng mới này có ảnh hưởng đến ngắt dòng hay không. Sau đó, các thuật toán vẽ sẽ chạy, tìm ra màu mà mỗi pixel cần có và điền vào

Bạn có thể thực hiện việc này một lần khi tải trang, nhưng khi tạo hoạt ảnh cho thứ gì đó, chúng tôi cần thực hiện tất cả các phép tính đó nhiều lần trong một giây. Với phép biến đổi, chúng ta có thể bỏ qua nhiều bước. Điều này có nghĩa là các phép tính chạy nhanh hơn, dẫn đến chuyển động mượt mà hơn

Có vẻ như thật khó hiểu khi 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
31 sẽ kéo dài/bóp nhỏ nội dung của phần tử, nhưng chúng ta thực sự có thể sử dụng hiệu ứng này để tạo lợi thế cho mình. Ví dụ: hãy xem hoạt hình điện TV lâu đời này

Nhiều biến đổi CSS

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
64

trạng thái nguồn

Bật Tắt

Đối với hoạt ảnh này, hiệu ứng đè bẹp thực sự cải thiện hiệu ứng

Và, nếu chúng ta thực sự không muốn văn bản của mình bị nén, chúng ta có thể áp dụng một phép biến đổi nghịch đảo cho phần tử con

Đây là một kỹ thuật tiên tiến, vượt xa phạm vi của bài đăng trên blog này, nhưng hãy biết rằng có thể sử dụng 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
31 để tăng kích thước của phần tử mà không làm biến dạng phần tử con của nó. Các thư viện như Framer Motion tận dụng thực tế này để xây dựng các hoạt ảnh có hiệu suất cao mà không bị kéo dài hoặc nén

Liên kết đến tiêu đề nàyQuay

Bạn đoán nó. 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
66 sẽ xoay các phần tử của chúng ta

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
67

Xoay vòng. 0độ

Chúng tôi thường sử dụng đơn vị 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
68 để xoay, viết tắt của độ. Nhưng có một đơn vị tiện dụng khác mà chúng ta có thể sử dụng, một đơn vị có thể dễ dàng hơn để suy luận về

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
69

Xoay vòng. 0lượt

Đơn vị 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
50 đại diện cho số lượt mà phần tử sẽ thực hiện. 1 lượt bằng 360 độ

Nó không rõ ràng, nhưng được hỗ trợ tốt;

Liên kết đến tiêu đề nàyNghiêng

Cuối cùng, 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:




 */
 transform: translateY(-100%);
 }
style>
<div class="parent">
 <div class="child">div>
div>
1 là một phép biến đổi ít được sử dụng nhưng khá gọn gàng

Chào thế giới

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
53

Xiên. 0độ

Như với 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
0, chúng ta có thể nghiêng dọc theo một trong hai trục

Chào thế giới

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
55

Xoay vòng. 0độ

trục

XY

Skew có thể hữu ích để tạo các yếu tố trang trí theo đường chéo (à la Stripe). Với sự trợ giúp của 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
09 và một số lượng giác, nó cũng có thể được sử dụng trên các phần tử mà không làm biến dạng văn bản. Kỹ thuật này được khám phá sâu trong bài đăng trên blog tuyệt vời của Nils Binder, “Tạo bố cục đường chéo như năm 2020”

Liên kết đến tiêu đề nàyChuyển đổi nguồn gốc

Mọi phần tử đều có điểm gốc, điểm neo mà các hàm biến đổi thực hiện từ đó

Kiểm tra cách xoay thay đổi khi chúng tôi điều chỉnh nguồn gốc biến đổi

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
57

Xoay vòng. 0độ

Biến đổi nguồn gốc

trung tâm (mặc định)

Hiển thị nguồn gốc

đúng sai

Nguồn gốc biến đổi hoạt động như một điểm xoay

Nó cũng không dành riêng cho xoay vòng; 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
58

Tỷ lệ. 1

Biến đổi nguồn gốc

trung tâm (mặc định)

Hiển thị nguồn gốc

đúng sai

Điều này hữu ích cho một số loại hiệu ứng (ví dụ: một phần tử "phát triển từ" một phần tử khác)

Liên kết đến tiêu đề nàyKết hợp nhiều thao tác

Chúng ta có thể xâu chuỗi nhiều hàm biến đổi lại với nhau bằng cách phân tách chúng bằng dấu cách

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
59

x. 0px

Xoay vòng. 0độ

Thứ tự là quan trọng. các hàm biến đổi sẽ được áp dụng tuần tự. Kiểm tra xem điều gì sẽ xảy ra nếu chúng ta đảo ngược thứ tự

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
50

Xoay vòng. 0độ

x. 0px

Các hàm biến đổi được áp dụng từ phải sang trái, giống như thành phần trong lập trình hàm

Trong bản demo đầu tiên, chúng tôi xoay phần tử ở vị trí tự nhiên của nó, sau đó dịch nó dọc theo trục X

Tuy nhiên, trong bản demo thứ hai này, chúng tôi dịch phần tử trước. Khi chúng ta áp dụng phép quay, nó sẽ quay quanh điểm gốc của nó, điều này không thay đổi

Đây là bản demo tương tự, nhưng với nguồn gốc được hiển thị

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
51

Xoay vòng. 0độ

x. 0px

Biến đổi nguồn gốc

trung tâm (mặc định)

Chúng ta có thể sử dụng điều này để lợi thế của chúng tôi

sân chơi mật mã

Định dạng mã bằng cách sử dụng Prettier

đặt lại mã

CSS HTML

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
3

Kết quả

Làm mới khung kết quả

Bật phím 'tab'

Trong ví dụ này, chúng tôi bắt đầu bằng cách định vị mặt trăng ở trung tâm chết của hành tinh. Hoạt hình của chúng tôi sẽ dịch chuyển nó sang bên phải 80px, sau đó làm cho nó xoay theo hình tròn. Vì gốc của mặt trăng vẫn ở tâm hành tinh nên nó quay quanh một khoảng

Hãy thử thay đổi 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
52 trong khối from/to để xem nó ảnh hưởng như thế nào đến hoạt hình

Hoạt ảnh khung hình chính

Quan tâm đến việc tìm hiểu thêm về hoạt ảnh khung hình chính CSS? . Hãy xem “Hướng dẫn tương tác về hoạt ảnh khung hình chính”

Liên kết đến tiêu đề nàyyếu tố nội tuyến

Một vấn đề phổ biến với các phép biến đổi là chúng không hoạt động với các phần tử nội tuyến trong bố cục Dòng

sân chơi mật mã

Định dạng mã bằng cách sử dụng Prettier

đặt lại mã

CSS HTML

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
6

Kết quả

Làm mới khung kết quả

Bật phím 'tab'

Các yếu tố nội tuyến không thích bị chen lấn. Mục tiêu của họ là xoay quanh một số nội dung với ít gián đoạn nhất có thể. Biến đổi không phải là tách trà của họ

Cách khắc phục đơn giản nhất là chuyển sang sử dụng 

<style>
  .parent {
    position: relative;
  }
  .child {
    width: 50px;
    height: 50px;
    /*
      Put the child in the
      top-right corner…
    */
    position: absolute;
    top: 0;
    right: 0;
    
    /*
      …and then shift it up to
      sit just outside:
    */
    transform: translateY(-100%);
  }
style>
<div class="parent">
  <div class="child">div>
div>
53 hoặc sử dụng chế độ bố cục khác (ví dụ:. Flexbox hoặc Lưới)

Liên kết đến tiêu đề nàychiều thứ ba

Ngoài các phép biến đổi 2D mà chúng tôi đã đề cập trong hướng dẫn này, CSS có thể biến đổi các phần tử ở chiều thứ ba

Biến đổi 3D có những đặc điểm và phong cách riêng. Để làm cho họ công bằng, tôi sẽ viết một bài riêng về chuyển đổi 3D. Giữ nguyên

Liên kết đến tiêu đề nàyĐi sâu hơn

Tôi có một lời thú nhận những thứ đã làm. hướng dẫn này ban đầu không được viết dưới dạng một bài đăng trên blog. Nó đã được chuyển từ khóa học CSS gần đây của tôi

Nhiều biến đổi CSS

CSS dành cho nhà phát triển JavaScript là một khóa học đa định dạng toàn diện với mục tiêu chuyển đổi mối quan hệ của bạn với CSS

Khóa học được tạo riêng cho những người làm việc với khung JS như React hoặc Angular hoặc Vue. Chúng tôi đề cập đến các nguyên tắc cơ bản của CSS, nhưng trong bối cảnh của hệ sinh thái JS hiện đại

Nó đi sâu hơn các bài đăng trên blog của tôi. Có hơn 150 video, ngoài hàng chục bài tập và dự án

Tôi đã làm việc toàn thời gian trong hơn một năm nay. Gần 5000 người đã mua nó trong vòng gây quỹ cộng đồng sớm và phản hồi của họ đã giúp khóa học trở nên tốt hơn rất nhiều

Bạn có thể có nhiều CSS chuyển đổi không?

Việc sử dụng nhiều biến đổi cùng một lúc là phổ biến. Thuộc tính 'transform' có thể chấp nhận bao nhiêu hàm tùy thích, vì vậy bạn có thể sử dụng và kết hợp chúng theo bất kỳ cách nào bạn muốn.

Chuyển đổi MS trong CSS là gì?

Thuộc tính CSS biến đổi cho phép bạn xoay, chia tỷ lệ, nghiêng hoặc dịch một phần tử . Nó sửa đổi không gian tọa độ của mô hình định dạng trực quan CSS.

Chức năng được sử dụng để kết hợp tất cả các phương pháp chuyển đổi với nhau là gì?

Hàm biến đổi ma trận có thể được sử dụng để kết hợp tất cả các biến đổi thành một.

CSS3 có hỗ trợ biến đổi 2D không?

CSS3 cho phép chúng ta thao tác với các đối tượng trong không gian 2D bằng cách sử dụng thuộc tính tranform và các chức năng của nó để chuyển đổi 2D .

programming css

Bài Viết Liên Quan

Vệ sinh chuồng trại cần thực hiện như thế nào năm 2024
Vệ sinh chuồng trại cần thực hiện như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào
60 lê văn thiêm nhân chính hà nội năm 2024
60 lê văn thiêm nhân chính hà nội năm 2024

mẹo hay
Giải bài 4 sgk toán 9 tập 1 trang 69 năm 2024
Giải bài 4 sgk toán 9 tập 1 trang 69 năm 2024

mẹo hay
Fix lỗi không vào được messenger trên iphone năm 2024
Fix lỗi không vào được messenger trên iphone năm 2024

mẹo hay Công Nghệ Iphone
Lỗi không đánh được tiếng việt trong google chrome năm 2024
Lỗi không đánh được tiếng việt trong google chrome năm 2024

mẹo hay Công Nghệ Google
Lỗi không tìm thấy máy khác trong mạng lan năm 2024
Lỗi không tìm thấy máy khác trong mạng lan năm 2024

mẹo hay Công Nghệ Máy
Lỗi application blocked by java security trên windows 10 năm 2024
Lỗi application blocked by java security trên windows 10 năm 2024

mẹo hay
Câu chuyện ngọn đuốc sống lê văn tám năm 2024
Câu chuyện ngọn đuốc sống lê văn tám năm 2024

mẹo hay
Máy tính hay bị tự khởi động là lỗi gì năm 2024
Máy tính hay bị tự khởi động là lỗi gì năm 2024

mẹo hay Công Nghệ Máy tính Máy
Thời tiết tết nguyên đán 2023 ở thanh hóa năm 2024
Thời tiết tết nguyên đán 2023 ở thanh hóa năm 2024

mẹo hay
Hàng hóa tiền tệ thị trường lớp 11 ngắn gọn năm 2024
Hàng hóa tiền tệ thị trường lớp 11 ngắn gọn năm 2024

mẹo hay Học Tốt Trường lớp Cryto Thị trường
Bài tập trắc nghiệm so too either neither năm 2024
Bài tập trắc nghiệm so too either neither năm 2024

mẹo hay Khỏe Đẹp Bài tập
Nên mua điện thoại nào tầm 6 triệu năm 2024
Nên mua điện thoại nào tầm 6 triệu năm 2024

mẹo hay
An toàn hóa chất theo thoong tư 31 năm 2024
An toàn hóa chất theo thoong tư 31 năm 2024

mẹo hay
Giá vé máy bay từ thanh hóa đi sài gòn năm 2024
Giá vé máy bay từ thanh hóa đi sài gòn năm 2024

mẹo hay Công Nghệ Máy Cryto Giá
Áo dài phan hải 57 lê văn hưu năm 2024
Áo dài phan hải 57 lê văn hưu năm 2024

mẹo hay
Giải bài tập toán lớp 6 tập 2 trang 21 năm 2024
Giải bài tập toán lớp 6 tập 2 trang 21 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Quyết toán dự án hoàn thành là gì năm 2024
Quyết toán dự án hoàn thành là gì năm 2024

mẹo hay Hỏi Đáp Là gì
Binh luan bài tập 2 trag 172 hóa 11 năm 2024
Binh luan bài tập 2 trag 172 hóa 11 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Bài tập toán 8 tập 2 trang 17 năm 2024
Bài tập toán 8 tập 2 trang 17 năm 2024

mẹo hay Khỏe Đẹp Bài tập

Quảng Cáo

Có thể bạn quan tâm

Bài 4 trang 118 sgk hóa 11 nang cao năm 2024
1 ngày trước . bởi OverturnedJenny
Authoring work 4 bị lỗi ko add được file mp4 năm 2024
1 ngày trước . bởi IrrevocableCheck-in
Enterogermina là men tiêu hóa hay men vi sinh năm 2024
1 ngày trước . bởi SlidingLigament
Phân chia tài sản khi ly hôn như thế nào năm 2024
1 ngày trước . bởi InsensitiveClimber
Các bài thơ trong sách ngữ văn 11 tập 2 năm 2024
1 ngày trước . bởi ImpracticalBullion
Bài văn số 6 văn 8 đề 2 năm 2024
1 ngày trước . bởi FearlessYoungster
Cá câu 5 đề toán thi vào lớp 10 năm 2024
1 ngày trước . bởi SturdyContents
Sửa lỗi photoshop 2023 không vào được camera raw năm 2024
1 ngày trước . bởi ExhaustingComplexity
Cách tẩy vết bẩn trên hóa đơn đỏ năm 2024
1 ngày trước . bởi PedagogicalMutation
Bài tập tính khối lượng bit bang go back n năm 2024
1 ngày trước . bởi RelentlessBones

Toplist được quan tâm

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
7 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
7 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
7 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
7 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
7 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
7 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
7 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
7 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
7 tháng trước

Quảng cáo

Xem Nhiều

Quyết định 416 qđ-qld 42 thuốc bhxh ngưng thanh toán năm 2024
1 tuần trước . bởi Cross-leggedEvacuation
Chúng đang tiến hóa và không ngừng đột biến năm 2024
2 ngày trước . bởi RewardingMetaphysics
Chi phí bốc xếp hàng hóa vào container năm 2024
6 ngày trước . bởi MaximumTherapy
Chay xe đạp với đi bộ cái nào tốt hơn năm 2024
1 ngày trước . bởi HornyCylinder
Công thức hóa học của từng loại vitamin năm 2024
4 ngày trước . bởi IncompatibleJenny
Sửa lỗi tự tắt htkk 4.1.6 năm 2024
1 tuần trước . bởi LankyOxygen
Các dạng bài tập nguyên lý thống kê kinh tế năm 2024
1 tuần trước . bởi GivenInterval
Top phong mạch uy tin tại hcm alobacsi năm 2024
1 tuần trước . bởi EstimatedNuisance
Toán ôn tập về biểu đồ lớp 5 năm 2024
2 ngày trước . bởi OutdoorPriesthood

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Xây Nhà Inc.