Hướng dẫn css transform triangle - tam giác biến đổi css

Question

i don't know how to rotate triangle shape in css2, here i have used css like,

Nội dung chính Show

Giới thiệu Transforms
Dùng để làm gì nhỉ?
Các dạng transforms:
2D Transforms
Các function
Transform origin
3D transform
Perspective & translateZ
Rotate in 3D

HTML:

CSS:

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

but i need like,

Hướng dẫn css transform triangle - tam giác biến đổi css

height 350px

how can i rotate this ??

Thanks.

Pedram

14.7k8 gold badges38 silver badges69 bronze badges8 gold badges38 silver badges69 bronze badges

asked Apr 2, 2016 at 6:33Apr 2, 2016 at 6:33

2

You can rotate div by this CSS:

Transform: rotate(90deg);

But I have an idea for your shape:

.shape { 
    width: 0;   
    height: 0; 
    border-top: 10px solid transparent;     
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue;
 }

answered Apr 2, 2016 at 8:55Apr 2, 2016 at 8:55

FarshidFarshidFarshid

4721 gold badge6 silver badges20 bronze badges1 gold badge6 silver badges20 bronze badges

You can do this with basic

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

3:

body {
  background: white;
}

#triangle {
    width: 0;
    height: 0;
    border-top: 350px solid transparent;
    border-bottom: 350px solid transparent;
    border-right: 500px solid black;
}

#inner {
    position: relative;
    top: -330px;
    left: 11px;
    width: 0;
    height: 0;
    border-top: 330px solid transparent;
    border-bottom: 330px solid transparent;
    border-right: 480px solid white;
}

answered Apr 2, 2016 at 6:57Apr 2, 2016 at 6:57

PedramPedramPedram

14.7k8 gold badges38 silver badges69 bronze badges8 gold badges38 silver badges69 bronze badges

Bài trước mình đã tìm hiểu về thuộc tính phổ biến và quan trọng đầu tiên khi làm CSS animation rồi, bài lần này mình sẽ giới thiệu về thuộc tính cũng cực kỳ hay được sử dụng, đó là Transforms.Transforms.

Như vậy là với

x > 0: đối tượng sẽ di chuyển về bên phải vị trí ban đầu
x < 0: đối tượng sẽ di chuyển về bên trái vị trí ban đầu
y > 0: đối tượng di chuyển xuống dưới vị trí ban đầu
y < 0: đổi tượng di chuyển lên trên của vị trí ban đầu

Tại sao cái trục tọa độ lại có chiều dương như vậy? Lý do rất đơn giản. Khi bạn code, các phần tử sẽ xuất hiện đầu tiên ở trên cùng bên trái của màn hình, sau đó thêm các đối tượng khác, nếu không có css gì đặc biệt với các đối tượng này, mọi thứ sẽ được xuất hiện theo thứ tự từ trái sang phải, từ trên xuống dưới như khi viết chữ phải không? Đó cũng xác định chiều dương "đương nhiên" của 2 trục X, Y trên màn hình.

Các bạn có thể thử bằng code pen phía trên nhé.

Scale

Function Scale đúng như tên gọi của nó, giúp điều chỉnh kích cỡ của đối tượng. Mặc định scale sẽ có giá trị là 1, tức là nguyên bản kích thước của đối tượng. Với scale mang giá trị < 1, kích thước mới sau scale sẽ nhỏ hơn ban đầu, và với scale lớn hơn 1 sẽ cho kích thước lớn hơn. Scale = 1 có thể coi như 100%, như vậy scale = 2 => kích thước tăng gấp 2 lần, scale = 0.5 => kích thước chỉ còn 1 nửa. Việc điều chỉnh kích thước này căn bản chính là tăng/giảm chiều cao - height/độ rộng - width của đối tượng. Như vậy là sẽ có tương ứng có thể tách riêng thay đổi chỉ chiều cao, hoặc chỉ độ rộng, hoặc thay đổi cả 2 cùng lúc.

scaleX(tỉ lệ giãn width)
scaleY(tỉ lệ giãn height)
scale(tỉ lệ thay đổi toàn bộ kích thước)
hoặc 
scale(tỉ lệ giãn width, tỉ lệ dãn height)

Rotate

Rotate là function giúp xoay đối tượng, nó sẽ có 1 tham số là lượng muốn xoay hoặc số đo góc mà bạn muốn xoay, theo đơn vị Degrees (

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

6) hoặc gradients (

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

7)

rotate(số góc - lượng)

Với số góc được đưa vào tham số, đối tượng sẽ xoay theo chiều dương là chiều kim đồng hồ tới góc đã chỉ định. Với tham số âm thì sẽ xoay ngược chiều kim đồng hồ. Lượng xoay ở đây là số lần bạn muốn xoay đối tượng. Ví dụ như muốn xoay 1 vòng, 2 vòng chẳng hạn:

transform: rotate(1turn); => xoay 1 vòng 360 độ
transform: rotate(180deg);
transform: rotate(200grad);

Skew

Skew function giống như sự kết hợp của translate và scale function, tức là có skewX để kéo giãn theo chiều ngang, và skewY để kéo giãn theo chiều dọc, hoặc skew(tham số X, tham số Y) để cùng lúc kéo giãn cả 2 phía. Skew sử dụng số đo góc để làm tham số kéo giãn.

Với skewX, đối tượng sẽ giữ nguyên chiều cao, và 2 đầu bị kéo tăng theo chiều ngang. Hiểu nôm na là lấy tâm đối tượng làm điểm gốc, hình sẽ bị nghiêng đi nhưng vẫn giữ nguyên chiều cao => hình sẽ bị méo. Ví dụ:

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

8 => chiều cao giữ nguyên nhưng hình bị nghiêng kéo giãn 30 độ. Giải thích bằng lời khá khó khăn, các bạn hãy thử trực tiếp ở code pen trên kia nhé

Transform origin

Phía trên đã giới thiệu 4 function transform, tuy nhiên là còn 1 thuộc tính vô cùng quan trọng nữa phục vụ cho 4 function trên, đó là Transform origin. Transform origin xác định tâm điểm mà thuộc tính transform áp dụng lên.

Lấy ví dụ cho function rotate, Mặc định tâm xoay của đối tượng luôn là trọng tâm của đối tượng, nhưng nếu bạn muốn nó xoay với tâm là góc trên cùng bên trái thì sao? Lúc này sẽ sử dụng Transform origin nhé:

Xem trên codepen

Transform origin nhận các tham số là các key word: top, bottom, left, right. Với tham số

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

9, thì điểm transform origin hay mình gọi ở đây là tâm xoay cho dễ hình dung, tâm xoay sẽ nằm ở trung điểm của cạnh trên hình. Tương tự nếu chỉ đưa 1 từ khóa vào thì 'điểm xoay' này sẽ nằm ở trung điểm cạnh đó.

Có thể kết hợp 2 từ khóa để chọn điểm xoay ở góc như ví dụ phía trên.

Ngoài ra transform-origin còn có thể nhận tham số như % nữa. Như phía trên đã nói, gốc tọa độ O sẽ là điểm

Transform: rotate(90deg);

0 của đối tượng. Vậy là tham số phần trăm đầu tiên sẽ là theo trục X, nếu tham số trục X là 100% tương ứng với điểm

Transform: rotate(90deg);

1 của đối tượng, tương ứng như vậy cũng với trục Y. Từ đó có thể tính điểm mà ta muốn theo phần trăm của 2 trục tọa độ. Ví dụ: 50% theo trục X kết hợp với 50% theo trục Y sẽ được điểm

Transform: rotate(90deg);

2 của đối tượng:

Transform: rotate(90deg);

3

Để có thể nắm rõ hơn, hãy cứ thử thực hành nhé.

3D transform

Giờ tới 3D transform. 3D transform thực tế là tương tự như 2D transform, nhưng có bổ sung thêm 1 trục Z với chiều hướng vuông góc màn hình tới mắt chúng ta.

Để có thể tạo được môi trường 3D, cần có đầu tiên là thuộc tính

Transform: rotate(90deg);

4.

Perspective & translateZ

Mà

Transform: rotate(90deg);

4 là gì? Perspective bạn có thể hiểu như là khoảng cách giữa mắt chúng ta tới màn hình hiển thị đối tượng vậy - hay khoảng cách từ mắt người xem tới màn hình.

Transform: rotate(90deg);

6 nhận giá trị đơn vị là pixels.

Bất cứ khi nào bạn muốn thao tác với môi trường 3D, thì việc đầu tiên là nhớ định nghĩa

Transform: rotate(90deg);

4 nhé.

Transform: rotate(90deg);

6 sẽ được định nghĩa trong phần tử cha chứa đối tượng cần transform 3D. Để dễ hình dung về

Transform: rotate(90deg);

4, hãy xem ví dụ dưới đây

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

0

Link codepen: https://codepen.io/bunnypi04/pen/OJJdqbZ

Giờ khi hover vào hình ảnh bạn thấy nó giống như đang scale lớn lên phải không? Nhưng thực tế thì đó ko phải là hiệu ứng đã được cài đặt. Thực tế thì hiệu ứng sẽ là tấm ảnh được đưa lại gần mắt chúng ta (di chuyển theo trục Z trên hệ tọa độ màn hình), nên ta cảm thấy cái ảnh to hơn, mặc dù độ rộng và chiều cao của tấm ảnh không hề thay đổi. Vậy thì

Transform: rotate(90deg);

4 làm nhiệm vụ gì ở đây? Bạn hãy thử thay

Transform: rotate(90deg);

4 tại body từ 1000px xuống còn 300px (bằng với translateZ) để xem thử nhé. Bạn sẽ thấy cái ảnh trở nên "siêu to khổng lồ", cảm giác như dí sát mắt ta vậy. Đó là do ta đã định nghĩa khoảng cách tới màn hình bằng với khoảng cách translate Z. Từ ví dụ này chắc mọi người đã hiểu

Transform: rotate(90deg);

4 chính là cơ sở để có độ lớn của hình ảnh khi translateZ. Đó là lý do luôn phải định nghĩa

Transform: rotate(90deg);

4 trước khi thao tác 3D.

Mặc định, tâm điểm

Transform: rotate(90deg);

4 - hay dễ hiểu hơn là điểm hội tụ của không gian 3D sẽ là điểm trung tâm của khối đặt

Transform: rotate(90deg);

4. Tuy nhiên bạn có thể thay đổi điểm hội tụ này bằng cách sử dụng

.shape { 
    width: 0;   
    height: 0; 
    border-top: 10px solid transparent;     
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue;
 }

6:

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

1

Dưới đây là 1 ví dụ mình tìm được: Xem trên code pen

Rotate in 3D

Có 1 thao tác nữa trong môi trường 3D ngoài translate, đó là rotate. Ở trên ta đã biết về rotate thường, nhưng thực ra có 3 loại rotate riêng lẻ: rotateX, rotateY, rotateZ

Giờ vẫn hình ảnh trên, ko translate nữa, đổi qua rotateZ thử xem nhé:

.frontcornertop {
 transition: none 0s ease 0s ;
 line-height: 39px;
 margin: 0px;
 padding: 0px;
 letter-spacing: 1px;
 font-weight: 600;
 font-size: 30px;
 left: -345px; 
 border-right: 0px solid transparent; 
 border-bottom-color: rgba(51, 51, 51, 0.5); 
 border-width: 345px 0px 345px 345px;
}

2

Bạn sẽ thấy hình ảnh xoay lấy trục Z làm tâm, trông như rotate thường vậy. Giờ thử thay rotateZ thành rotateX xem nhé. Khi chọn rotateX, trục quay của hình sẽ chính là trục Ox, hay là 1 đường ngang, thử hover sẽ thấy . Ví dụ như khi rotateX(90deg), bạn sẽ thấy hình ảnh xoay rồi biến mất luôn, vì nó đang nằm vuông góc với màn hình, mà nó lại ko có độ dày, nên trông như đang biến mất vậy. Tương tự với

.shape { 
    width: 0;   
    height: 0; 
    border-top: 10px solid transparent;     
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue;
 }

7 sẽ là trục Oy làm trục xoay.

. Ví dụ như khi rotateX(90deg), bạn sẽ thấy hình ảnh xoay rồi biến mất luôn, vì nó đang nằm vuông góc với màn hình, mà nó lại ko có độ dày, nên trông như đang biến mất vậy. Tương tự với

.shape { 
    width: 0;   
    height: 0; 
    border-top: 10px solid transparent;     
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue;
 }

7 sẽ là trục Oy làm trục xoay.

Kết bài

Bài này đã hướng dẫn tìm hiểu về transform, tuy nhiên con đường tới tận dụng làm thành animation sao cho đẹp còn cần khá nhiều điều kết hợp. Bài tiếp theo mình sẽ có vài hướng dẫn để mọi người dần dà làm quen và có thêm ý tưởng cho animation của mình nhé

programming css Transform: translate CSS Transform CSS Transform: rotate CSS transform-origin trong css CSS transform: scale Text-transform CSS Multiple transform CSS

Hướng dẫn css transform triangle - tam giác biến đổi css

Scale

Rotate

Skew

Transform origin

3D transform

Perspective & translateZ

Rotate in 3D

Kết bài

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội