Xin chào tất cả mọi người.
Hôm nay chúng ta sẽ nói ngắn gọn về sự biến đổi.
Biến đổi rất giống với quá trình chuyển đổi, ở chỗ chúng cung cấp một
tùy chọn khác để thay đổi diện mạo của các phần tử trên trang của chúng tôi.
Vì vậy, chúng tôi có thể thay đổi mọi thứ theo cả hai chiều và
một cách ba chiều khi mọi người đang nhìn vào trang web của bạn.
Vì vậy, chúng ta hãy nhìn vào một số các tùy chọn biến đổi hai chiều.
Chúng ta sẽ nói về dịch, xoay, quy mô,
nghiêng và ma trận, và làm thế nào mỗi một trong số này có thể hoạt động trong CSS3 của bạn.
Lựa chọn đầu tiên tôi sẽ cho bạn thấy là dịch.
Những gì dịch sẽ làm là bạn có thể cho nó hai giá trị, tôi đã gọi chúng là x và
y và tùy thuộc vào những giá trị đó,
bạn có thể di chuyển phần tử sang trái và phải hoặc lên xuống.
Nếu x là dương,
bạn di chuyển sang phải, nếu nó là âm bạn di chuyển sang trái.
Với y, nếu nó là tích cực bạn di chuyển xuống và nếu nó là tiêu cực bạn di chuyển lên.
Vì vậy, hãy nhìn vào một ví dụ thực tế để làm cho nó rõ ràng hơn một chút.
Đây, tôi có một yếu tố màu xanh đẹp.
Và những gì tôi sắp nói là tôi muốn dịch nó, 100 và 75.
Vì vậy, bạn sẽ mong đợi để thấy nó di chuyển sang bên phải và xuống một chút.
Vì vậy, bạn có thể thấy, một lần nữa, thật khó để thực sự biết khi nào mọi thứ đi lên và xuống.
Nhưng nếu bạn nhìn vào lợi nhuận, chúng tôi đã tăng lợi nhuận gần như hiệu quả.
Tùy chọn tiếp theo là xoay.
Khi bạn xoay một cái gì đó, bạn đang xoay, hoặc
tôi loại muốn nghĩ về nó như là quay các yếu tố, một số độ nhất định.
Anh không thấy vòng quay đâu.
Bạn chỉ cần nhìn thấy kết quả hoặc những gì nó sẽ trông như thế nào ở cuối.
Vì vậy, ở đây tôi có một yếu tố khác và tôi sẽ nói nó quay 30 độ.
Vì vậy, từ đây, đến đây.
Bây giờ nó thực sự quan trọng mà nhớ để đặt DEG.
Nếu bạn chỉ cần đặt 30, nhiều trình duyệt sẽ không có công việc đó.
Trong thực tế, hầu hết trong số họ sẽ không.
Vì vậy, hãy đảm bảo bạn cho nó độ bạn muốn nó quay, một số loại số, 30,
90, 80, và sau đó sử dụng độ.
Tiếp theo, chúng ta hãy nói về quy mô.
Và quy mô chỉ là một cách nói lạ mắt, chúng ta hãy làm cho nó rộng hơn hoặc cao hơn.
Vì vậy, một lần nữa, bạn cung cấp cho nó hai con số, và
đó là bao nhiêu bạn muốn thay đổi chiều rộng và chiều cao của một phần tử.
Vì vậy, ở đây tôi có một khối nhỏ hơn, và
tôi đã quyết định tôi muốn làm cho nó rộng gấp hai lần và cao gấp ba lần.
Đây là một yếu tố mới sau quy mô biến đổi.
Skew rất khó để tôi giải thích những gì nó làm, và thậm chí còn khó hơn để làm điều
đó bởi vì tôi luôn quên đi trái và quyền lợi của mình khi tôi nhìn vào máy ảnh.
Vì vậy, một lần nữa, bạn sẽ muốn chơi với cái này và
nhìn vào một số ví dụ.
Những gì bạn đang làm là bạn đang xoay phần tử một số độ nhất
định xung quanh góc x và một số độ nhất định xung quanh góc y.
Ở đây tôi sẽ cho các bạn thấy một độ lệch, 30 độ x 15 độ.
Bạn bắt đầu từ đây và cuối cùng bạn quay lại với một góc độ rất kỳ lạ.
Và một lần nữa thật khó để cho các bạn thấy điều này khi tôi nhìn chằm chằm vào màn hình, vì vậy
tôi hy vọng các bạn sẽ gõ nó vào và chơi với nó một chút.
Tùy chọn tiếp theo và cuối cùng là ma trận.
Và khi bạn sử dụng ma trận,
bạn có thể kết hợp tất cả các phương pháp biến đổi 2D thành một lệnh cùng một lúc.
Tôi không bao giờ sử dụng nó, bởi vì tôi thấy nó quá khó hiểu để nhớ
cái thang đo nào, cái nào xoay, cái nào nghiêng.
Vì vậy, trừ khi bạn cảm thấy thực sự tự tin với CSS3 của bạn, tôi sẽ tránh sử dụng ma trận
và đi trước và sử dụng mỗi cá nhân khác biến đổi một tại một thời điểm.
Và những thứ khác mà chúng tôi vừa nói đến là hai biến đổi chiều.
Chúng ta cũng có thể thực hiện các biến đổi ba chiều, và
chúng rất giống với những biến đổi mà chúng ta vừa nói đến.
Vì vậy, ví dụ với xoay, bây giờ thay vì chỉ xoay dọc theo
trục x hoặc y, chúng ta cũng có thể xoay quanh kích thước z là tốt.
Vì vậy, nếu bạn muốn sử dụng một xoay 3D, các tùy chọn của bạn bây giờ được biến thế:Rotatey
bao nhiêu độ, RotaTex, RotaTez,
hoặc bạn thực sự có thể nói rotate3d và cung cấp cho nó số dọc theo mỗi chiều duy nhất.
Tôi hiếm khi sử dụng kích thước 3D.
Nhưng chúng ta có các lựa chọn.
Chúng tôi có vòng xoay, chúng tôi có quy mô, và chúng tôi có bản dịch.
Và họ thực sự có thể làm một số điều thú vị với cách bạn muốn
các yếu tố của bạn trông như thế nào.
Khi nói đến thời gian để sử dụng biến đổi, có một vài điều cần suy nghĩ.
Thông thường khi bạn sử dụng biến đổi, bạn sẽ sử dụng chúng với những thay đổi trạng thái.
Nếu bạn nhớ, điều đó có nghĩa là bạn có thể có một biến đổi xảy ra khi bạn làm một
di chuột trên, hoặc một trên tập trung, hoặc một trên hoạt động.
Nếu bạn đang thực sự chỉ cố gắng để thay đổi những gì một yếu tố trông giống như ngay từ
đầu và để nó theo cách đó, bạn có thể muốn suy nghĩ về chỉ chụp ảnh
và gây rối với các hình ảnh và làm việc ngoại tuyến.
Nó nhanh hơn và nó không sử dụng hết băng thông.
Tuy nhiên, đó là một cách mát mẻ để kinda chơi với mọi thứ và
đạt được sự tự tin với CSS của bạn.
Tất nhiên, với rất nhiều điều chúng tôi đã học trong lớp này, điều quan trọng cần
nhớ là bạn sẽ thường yêu cầu các tiền tố trình duyệt để chuyển đổi hoạt động.
Vì vậy, một công cụ nữa trong vành đai công cụ của bạn
để học cách làm điều gì đó thú vị với trang của bạn.
Tôi biết rằng tôi đã không làm ví dụ bình thường của tôi ở đây, nhưng
video tiếp theo sẽ hiển thị một ví dụ bằng cách sử dụng chuyển tiếp, biến đổi, và
một số điều khác mà chúng tôi đã học từ đầu.
Tôi hy vọng bạn sẽ nhìn vào nó và
cảm thấy tự tin hơn một chút về những gì chúng ta vừa học được với biến đổi.
Chúc may mắn.