Video: [Học CSS - 23] Tạo chuyển động với Transition 2025
CSS 3 cho phép bạn tạo nhiều hiệu ứng mát mẻ trên trang web của bạn để hiển thị trên iPhone và iPad. Các thuộc tính chuyển đổi của CSS 3 cho phép bạn biến đổi một phần tử để tạo hiệu ứng 2D và 3D. Bạn có thể chỉ định một danh sách các biến đổi để thay đổi nhiều khía cạnh của một phần tử. Nếu nhiều tùy chọn được chỉ định, mỗi ứng dụng được áp dụng theo thứ tự được liệt kê.
Các tùy chọn chuyển đổi bao gồm những mô tả trong danh sách này:
-
scale - Thay đổi chiều cao và chiều rộng của một phần tử. Bạn có thể chỉ định hai số để xác định một tỷ lệ khác nhau cho chiều rộng và chiều rộng. Tuy nhiên, yếu tố này thường được sử dụng với chỉ một số để chia tỷ lệ một phần tử. Ví dụ đầu tiên trong số các ví dụ sau biến đổi phần tử thành một nửa kích thước và thứ hai biến đổi phần tử thành một nửa chiều rộng và cao gấp đôi:
-chuyển đổi web: quy mô (0; 5); -webkit-chuyển đổi: quy mô (2, 0. 5);
-
translate - Sử dụng thuộc tính này để dịch , hoặc di chuyển, một phần tử từ vị trí A đến vị trí B bằng nhau dọc theo các trục x và y. Bạn cũng có thể sử dụng translateX và translateY để di chuyển các phần tử chỉ với một trục tại một thời điểm. Ví dụ: mã này làm cho một phần tử di chuyển 150 pixel từ bên trái và 150 từ trên xuống:
-webkit-transform: translate (150px, -150px);
-
skew - Sử dụng thuộc tính này để skew , hoặc thay đổi vị trí của một phần tử dựa trên một giá trị được chỉ định làm nghiêng một phần tử trên trục x và trục y. Ví dụ: điều này có thể nghiêng một phần tử 20 độ trên trục x:
-chuyển đổi trang web: skew (15deg, 4deg);
-
rotate - Sử dụng thuộc tính này để xoay , hoặc thay đổi vị trí của một phần tử dựa trên một giá trị được chỉ định điều khiển góc quay. Ví dụ, ví dụ đầu tiên trong mã này xoay một phần tử 5 độ sang phải, phần thứ hai quay phần tử -5 (âm 5).
Như bạn thấy trong hình, nó làm cho các bức ảnh ở bên phải và bên trái trong thiết kế này có góc lệch từ hình ảnh trung tâm:
-webkit-transformation: rotate (5deg); -webkit-chuyển đổi: xoay (-5deg);
Trong ví dụ trang SCUBA thể hiện trong hình này, lưu ý rằng hai hình ảnh bên ngoài xoay theo hướng trái và phải, sử dụng tính năng Xoay vòng CSS - nhưng chỉ trên Safari, Firefox và Chrome. Truy cập trang này với trình duyệt IE và các hộp được tất cả trong một đường thẳng, nhưng họ không nhìn xấu theo cách đó, do đó, không có hại làm.
Cũng lưu ý rằng có hình ảnh được gắn vào dưới cùng của thiết kế sao cho khi bạn chuyển iPad / iPhone từ chế độ phong cảnh sang chế độ xem chân dung, nội dung sẽ lấp đầy toàn bộ màn hình.
