Mục đích của bài viết này là xoay một phần tử HTML bằng cách sử dụng thuộc tính biến đổi CSS. Thuộc tính này được sử dụng để di chuyển, xoay, chia tỷ lệ và thực hiện các loại chuyển đổi khác nhau của các phần tử
Hàm rotate() có thể được sử dụng để xoay bất kỳ phần tử HTML nào hoặc được sử dụng để chuyển đổi. Phải mất một tham số xác định góc quay. Góc quay bao gồm hai phần, giá trị của góc quay tiếp theo là đơn vị quay. Đơn vị có thể được xác định theo độ (deg), độ dốc (grad), radian (rad) và lần lượt
Hàm rotate() xoay một phần tử dựa trên góc mà bạn cung cấp làm đối số. Bạn có thể cung cấp góc bằng bất kỳ giá trị góc CSS hợp lệ nào (i. e. theo độ, gradian, radian hoặc lượt)
độ
Có 360 độ trong một vòng tròn đầy đủ. Định danh đơn vị cho độ là deg
Đây là một ví dụ về việc sử dụng độ với hàm rotate()
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Xem trước trình chỉnh sửa
điểm tốt nghiệp
Có 400 gradian trong một vòng tròn đầy đủ. Định danh đơn vị cho gradian là grad
Thang điểm còn được gọi là "gons" hoặc "grades" (mặc dù đây không phải là mã định danh đơn vị hợp lệ — bạn vẫn nên sử dụng grad làm mã định danh đơn vị)
Đây là một ví dụ về việc sử dụng gradient
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Xem trước trình chỉnh sửa
radian
Có 2Ï€ radian trong một vòng tròn đầy đủ. Định danh đơn vị cho radian là .stripe {
background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
}1
Đây là một ví dụ về việc sử dụng radian
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Xem trước trình chỉnh sửa
rẽ
Có 1 lượt trong một vòng tròn đầy đủ. Định danh đơn vị cho lượt là .stripe {
background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
}2
Đây là một ví dụ về việc sử dụng lượt
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Xem trước trình chỉnh sửa
Giá trị âm
Bạn cũng có thể sử dụng các giá trị âm cho góc. Giá trị âm sẽ xoay phần tử theo hướng ngược chiều kim đồng hồ
Thí dụ
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Xem trước trình chỉnh sửa
Thêm .stripe {
background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
}3
Gốc mặc định cho phép quay là .stripe {
background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
}4. Bạn có thể sử dụng .stripe {
background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
}3 để điều chỉnh gốc của phép biến đổi
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Xem trước trình chỉnh sửa
Cú pháp chính thức
Cú pháp chính thức của hàm rotate() như sau
Những giá trị khả thi
Hàm rotate() chấp nhận bất kỳ giá trị góc hợp lệ nào xác định góc xoay. Góc này có thể được biểu thị bằng bất kỳ đơn vị nào sau đây
degĐộ. Có 360 độ trong một vòng tròn đầy đủ. gradGradians, còn được gọi là "gons" hoặc "grades" (mặc dù đây không phải là số nhận dạng đơn vị hợp lệ — bạn vẫn nên sử dụng grad làm số nhận dạng đơn vị). Có 400 gradian trong một vòng tròn đầy đủ. .stripe {background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
}1Radian. Có 2Ï€ radian trong một vòng tròn đầy đủ. .stripe {
background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
}2Lượt. Có 1 lượt trong một vòng tròn đầy đủ
Góc không
Mã định danh đơn vị là tùy chọn cho các góc bằng không. Ví dụ: cả rotate()8 và rotate()9 đều hợp lệ (nhưng deg0 thì không)
Với tất cả các công cụ mà chúng tôi có được trong CSS, các nhà thiết kế sẽ có khả năng mới để thử nghiệm. Tôi đã viết về một số công cụ đó trên Thủ thuật CSS. Năm nỗi sợ hãi trong thiết kế cần đánh bại với CSS Grid
Tôi vẫn tin rằng lấy cảm hứng từ thiết kế punk rock của thập niên 70 và 80 sẽ là một xu hướng
Nếu bạn muốn bắt đầu với quy mô nhỏ, hãy giới thiệu một số góc độ cho thiết kế của bạn. Đây là một thủ thuật đơn giản để tạo góc cho một dải nội dung mà không cần thêm khoảng trắng khó xử
Bắt đầu với một sọc thông thường
Chúng ta đều biết mẫu thiết kế này. nền có chiều rộng đầy đủ và nội dung quảng cáo đẹp mắt
Chúng tôi thiết lập đánh dấu rất đơn giản
<section class="stripe"><h1>Check this regular stripe</h1>
<p>If you're wanting to get into punk-rock design, rotated areas are really cool and you'll look hip and cool.</p>
</section>
Thêm một chút CSS rất đơn giản và chúng ta đã hoàn thành
.stripe {background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
}
Đây là một dải nội dung đáng yêu có thể sử dụng được. Bạn cũng có thể khám phá một linear-gradient đẹp khi bạn ở đó
sử dụng chuyển đổi. rotate() để giới thiệu góc
Thuộc tính CSS biến đổi có vô số chức năng tuyệt vời. Một trong những chức năng dễ sử dụng nhất là rotate(). Nó nhận một đơn vị góc chẳng hạn như 45 độ và xoay phần tử theo lượng đó. Số nguyên dương là vòng quay theo chiều kim đồng hồ và số âm là vòng quay ngược chiều kim đồng hồ
.stripe {background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
transform: rotate(-5deg);
}
Bạn sẽ nhận thấy từ bức ảnh rằng đây là một vấn đề. Đây vẫn là một hình chữ nhật và bằng cách xoay hình chữ nhật, chúng ta thấy các góc
Điều này không mang lại cảm giác chuyên nghiệp, vì vậy chúng tôi cần điều này để luôn ở cạnh trình duyệt
skew() để giải cứu
Bằng cách lấy cùng một góc mà chúng ta đã sử dụng trong hàm rotate(), chúng ta có thể nghiêng phần tử về phía sau. Điều này nghiêng bên trái và bên phải của phần tử của chúng tôi trở lại điểm xuất phát của chúng
Thuộc tính biến đổi có thể đảm nhận nhiều chức năng, vì vậy chúng tôi áp dụng nó trên cùng một dòng CSS
.stripe {background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
transform: rotate(-5deg) skew(-5deg);
}
Con mắt thiết kế sành điệu sẽ nhận thấy một vấn đề nữa với việc triển khai của chúng tôi. Văn bản bây giờ bị lệch. Đây có thể là một cái gì đó bạn muốn. Văn bản bị lệch làm tôi hơi khó chịu, vì vậy hãy bỏ nó đi
Thời gian để mở khóa văn bản
Tôi không phải là người thích giới thiệu đánh dấu mới cho kiểu dáng nếu tôi có thể tránh được, nhưng với việc giới thiệu vùng chứa nội dung, chúng tôi có thể sửa lỗi văn bản bị lệch
Rất có thể, dù sao thì bạn cũng đã có một vùng chứa ở đây để đặt chiều rộng cho nội dung của mình
Bằng cách áp dụng độ nghiêng của góc âm mà chúng ta đang sử dụng, văn bản sẽ nghiêng lại về góc ban đầu. Bạn cũng có thể sử dụng phương pháp này để bỏ xoay văn bản, nếu đó là nhu cầu của bạn
đánh dấu đầy đủ
<section class="stripe"><div class="stripe__content">
<h1>Check this rotation with the straight edges and non-skewed text!!!</h1>
<p>If you're wanting to get into punk-rock design, rotated areas are really cool and you'll look hip and cool.</p>
</div>
</section>
CSS đầy đủ
.stripe {background-image: linear-gradient(240deg, #eaee44, #90ec19);
padding: 5rem;
transform: rotate(-5deg) skew(-5deg);
}
.stripe__content {
transform: skew(5deg);
}
Điều này mang lại cho chúng ta những đường nét rõ ràng với một chút nhạc punk rock. Xem hoạt động này trên CodePen
Nếu bạn vẫn đang làm mọi thứ theo cách mà bạn đã luôn làm, thì đã đến lúc thêm gia vị cho mọi thứ. Thêm các góc là một cách dễ dàng và không gây đau đớn để đưa một số cayenne vào quy trình thiết kế của bạn