Làm biến hình biểu tượng cảm xúc sử dụng CSS3

Trong một văn bản web, đôi khi người viết dùng một nhóm ký tự để tạo biểu tượng cảm xúc và ít nhiều biểu tượng đó nói lên được cảm xúc mà tác giả muốn bày tỏ.

Ví dụ (:   :-O

Sử dụng CSS3 có thể làm biến hình các biểu tượng cảm xúc này một cách độc đáo. Trước tiên, bạn hãy tạo phần CSS như dưới đây.

span.smile {
color: Cyan;
display: inline-block;
font-family: Tahoma;
font-size: 20px;
padding: 0 5px;
}
span.smile.left {
-webkit-transform: rotate(-90deg); /* Chrome y Safari */
-moz-transform: rotate(-90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
-o-transform: rotate(-90deg); /* Opera */
}
span.smile.right {
-webkit-transform: rotate(90deg); /* Chrome y Safari */
-moz-transform: rotate(90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Internet Explorer */
-o-transform: rotate(90deg); /* Opera */
}

Tiếp đến là tạo cấu trúc HTML đơn giản như thế này.

<span class="smile right">:-)</span>

Bên dưới là kết quả một số biểu tượng cảm xúc sau khi sử dụng thủ thuật này.