transform:

skewY(10deg)

skewY(20deg)

skewY(30deg)

skewY(40deg)

skewY(50deg)

skewY(60deg)

skewY(70deg)

skewY(80deg)

skewY(90deg)

skewY(100deg)

skewY(110deg)

skewY(120deg)

skewY(130deg)

skewY(140deg)

skewY(150deg)

skewY(160deg)

skewY(170deg)

skewY(180deg)

none

myDIV

#myDIV
{
background-color:#E8E8FF;
transform:skewY(10deg);
}

---

transform:

skewX(10deg)

skewX(20deg)

skewX(30deg)

skewX(40deg)

skewX(50deg)

skewX(60deg)

skewX(70deg)

skewX(80deg)

skewX(90deg)

skewX(100deg)

skewX(110deg)

skewX(120deg)

skewX(130deg)

skewX(140deg)

skewX(150deg)

skewX(160deg)

skewX(170deg)

skewX(180deg)

none

myDIV

#myDIV
{
background-color:#E8E8FF;
transform:skewX(10deg);
}

---

transform:

skew(10deg,10deg)

skew(20deg,20deg)

skew(30deg,30deg)

skew(40deg,40deg)

skew(45deg,45deg)

skew(50deg,50deg)

skew(60deg,60deg)

skew(70deg,70deg)

skew(80deg,80deg)

skew(90deg,90deg)

skew(100deg,100deg)

skew(110deg,110deg)

skew(120deg,120deg)

skew(130deg,130deg)

skew(140deg,140deg)

skew(150deg,150deg)

skew(160deg,160deg)

skew(170deg,170deg)

skew(180deg,180deg)

none

myDIV

#myDIV
{
background-color:#E8E8FF;
transform:skew(10deg,10deg);
}

---

transform:

rotateZ(10deg)

rotateZ(20deg)

rotateZ(30deg)

rotateZ(40deg)

rotateZ(45deg)

rotateZ(50deg)

rotateZ(60deg)

rotateZ(70deg)

rotateZ(80deg)

rotateZ(90deg)

rotateZ(100deg)

rotateZ(110deg)

rotateZ(120deg)

rotateZ(130deg)

rotateZ(140deg)

rotateZ(150deg)

rotateZ(160deg)

rotateZ(170deg)

rotateZ(180deg)

none

myDIV

#myDIV
{
background-color:#E8E8FF;
transform:rotateZ(10deg);
}

---

transform:

rotateY(10deg)

rotateY(20deg)

rotateY(30deg)

rotateY(40deg)

rotateY(45deg)

rotateY(50deg)

rotateY(60deg)

rotateY(70deg)

rotateY(80deg)

rotateY(90deg)

rotateY(100deg)

rotateY(110deg)

rotateY(120deg)

rotateY(130deg)

rotateY(140deg)

rotateY(150deg)

rotateY(160deg)

rotateY(170deg)

rotateY(180deg)

none

myDIV

#myDIV
{
background-color:#E8E8FF;
transform:rotateY(10deg);
}

---

transform:

rotateX(10deg)

rotateX(20deg)

rotateX(30deg)

rotateX(40deg)

rotateX(45deg)

rotateX(50deg)

rotateX(60deg)

rotateX(70deg)

rotateX(80deg)

rotateX(90deg)

rotateX(100deg)

rotateX(110deg)

rotateX(120deg)

rotateX(130deg)

rotateX(140deg)

rotateX(150deg)

rotateX(160deg)

rotateX(170deg)

rotateX(180deg)

none

myDIV

#myDIV
{
background-color:#E8E8FF;
transform:rotateX(10deg);
}

---

transform:

rotate(10deg)

rotate(20deg)

rotate(30deg)

rotate(40deg)

rotate(45deg)

rotate(50deg)

rotate(60deg)

rotate(70deg)

rotate(80deg)

rotate(90deg)

rotate(100deg)

rotate(110deg)

rotate(120deg)

rotate(130deg)

rotate(140deg)

rotate(150deg)

rotate(160deg)

rotate(170deg)

rotate(180deg)

rotate(270deg)

rotate(360deg)

none

bendoi.vn

#myDIV
{
background-color:lightblue;
transform:rotate(10deg);
}

---

transform:

scaleY(1.1)

scaleY(1.5)

scaleY(2)

scaleY(3)

scaleY(0.5)

none

myDIV

#myDIV
{
background-color:#E8E8FF;
transform:scaleY(1.1);
}

---

transform:

scaleX(1.1)

scaleX(1.5)

scaleX(2)

scaleX(3)

scaleX(0.5)

none

myDIV

#myDIV
{
background-color:lightblue;
transform:scaleX(1.1);
}

---

transform:

scale(1.1,1.1)

scale(1.5,1.5)

scale(2,2)

scale(2,3)

scale(0.5,2)

none

myDIV

#myDIV
{
background-color:lightblue;
transform:scale(1.1);
}

---

transform:

translateY(10px)

translateY(20px)

translateY(50px)

translateY(100px)

translateY(-25px)

none

myDIV

#myDIV
{
background-color:lightblue;
transform:translateY(10px);
}

---

transform:

translateX(10px)

translateX(20px)

translateX(50px)

translateX(100px)

translateX(-25px)

none

myDIV

#myDIV
{
background-color:lightblue;
transform:translateX(10px);
}

---

transform:

translate(10px)

translate(20px)

translate(20px,10px)

translate(20px,20px)

translate(50px,50px)

translate(100px,100px)

translate(-25px,-25px)

none

myDIV

#myDIV
{
background-color:lightblue;
transform:translate(10px);
}

---

transform:

matrix(0.866,0.5,-0.5,0.866,0,0)

matrix(0.866,0.5,-0.6,0.866,0,0)

matrix(0.866,0.5,-0.7,0.866,0,0)

matrix(0.866,0.5,-0.8,0.866,0,0)

matrix(0.866,0.6,-0.8,0.866,0,0)

matrix(0.866,0.7,-0.8,0.866,0,0)

matrix(0.866,0.8,-0.8,0.866,0,0)

matrix(0.786,0.8,-0.8,0.866,0,0)

matrix(0.686,0.8,-0.8,0.866,0,0)

matrix(0.586,0.8,-0.8,0.866,0,0)

matrix(0.586,0.8,-0.8,0.786,0,0)

matrix(0.586,0.8,-0.8,0.686,0,0)

matrix(0.586,0.8,-0.8,0.586,0,0)

matrix(0.586,0.8,-0.8,0.586,10,0)

matrix(0.586,0.8,-0.8,0.586,20,0)

matrix(0.586,0.8,-0.8,0.586,30,0)

matrix(0.586,0.8,-0.8,0.586,40,0)

matrix(0.586,0.8,-0.8,0.586,40,10)

matrix(0.586,0.8,-0.8,0.586,40,20)

matrix(0.586,0.8,-0.8,0.586,40,30)

matrix(0.586,0.8,-0.8,0.586,40,40)

none

bendoi.vn

#myDIV
{
background-color:#56AF0D;
transform:matrix(0.866,0.5,-0.5,0.866,0,0);

}

---

transform:

rotate(10deg)

rotate(20deg)

rotate(30deg)

rotate(40deg)

rotate(45deg)

rotate(50deg)

rotate(60deg)

rotate(70deg)

rotate(80deg)

rotate(90deg)

rotate(100deg)

rotate(110deg)

rotate(120deg)

rotate(130deg)

rotate(140deg)

rotate(150deg)

rotate(160deg)

rotate(170deg)

rotate(180deg)

rotate(270deg)

rotate(360deg)

none

bendoi.vn

#myDIV
{
background-color:lightblue;
transform:rotate(10deg);
}

---

resize ₃

---

Người dùng thay đổi kích thước đối tượng

Thuộc tính	giá trị	Ví dụ	Mô tả
resize	both	resize: both;	Người dùng có thể thay đổi cả chiều rộng và chiều cao của thành phần.
	none	resize: none;	Người dùng không thể thay đổi thành phần theo chiều ngang.
	horizontal	resize: horizontal;	Người dùng có thể thay đổi thành phần theo chiều thẳng đứng.
	vertical	resize: vertical;	Người dùng có thể thay đổi chiều rộng của thành phần.

resize:

both

horizontal

vertical

none

Di chuột vào góc dưới bên phải để kéo ...

#myDIV
{
resize:both;
overflow:auto;
}

Sự tương thích ( Cập nhật / Báo lỗi )

x

*

x

*

*

---

outline-offset ₃

---

Khoảng cách vùng đệm và cũng là thông số kích thước phần đối tượng vượt tràn ra ngoài

Thuộc tính	giá trị	Ví dụ	Mô tả
outline-offset	length	outline-offset: length;
	inherit	outline-offset: inherit;

Xem ví dụ

<style>
#ttt
{
margin:auto;
padding:10px;
width:350px;
height:100px;
border: 2px solid #D4EDAC;
outline:2px solid #A4CC66;
outline-offset:15px;
}
</style>

<div id="ttt"> ... </div>

Sự tương thích ( Cập nhật / Báo lỗi )

x

*

*

*

*

---

nav-up ₃

---

Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên

Thuộc tính	giá trị	Ví dụ	Mô tả
nav-up	auto	nav-up: auto;
	id	nav-up: id;
	target-name	nav-up: thao;
	inherit	nav-up: inherit;

Xem ví dụ

<style>
button
{
position:absolute;
}

button#b1
{
top:20%;left:25%;
nav-index:1;
nav-right:#b2; nav-left:#b4;
nav-down:#b2; nav-up:#b4;
}

button#b2
{
top:40%;left:50%;
nav-index:2;
nav-right:#b3; nav-left:#b1;
nav-down:#b3; nav-up:#b1;
}

button#b3
{
top:70%;left:25%;
nav-index:3;
nav-right:#b4; nav-left:#b2;
nav-down:#b4; nav-up:#b2;
}

button#b4
{
top:40%;left:0%;
nav-index:4;
nav-right:#b1; nav-left:#b3;
nav-down:#b1; nav-up:#b3;
}
</style>

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

Sự tương thích ( Cập nhật / Báo lỗi )

x

x

*

x

x

x

x

x

x

x

x

x

x

x

---