CSS transform-style

transform-style ₃

---

Các đối tượng lồng nhau vẫn giữ được tỷ lệ kích thước trong xử lý 3D. (Thường được ứng dụng cho 1 nhóm các đối tượng cùng chuyển động)

Thuộc tính	giá trị	Ví dụ	Mô tả
transform-style	preserve-3d	transform-style: preserve-3d;	Các thành phần bên trong giữ vị trí 3D của nó.
	flat	transform-style: flat ;	Các thành phần bên trong không giữ vị trí 3D của nó.

Xem ví dụ

<style>
#ttt1
{
position: relative;
height: 200px;
width: 500px;
margin: 10 auto;
padding:10px;
border: 1px solid black;

/* Hiệu ứng chuyển động, chỉ để minh họa quan sát thấy tỷ lệ các đối tượng không đổi*/
animation: myAnimate 10s infinite linear;
-moz-animation: myAnimate 10s infinite linear;
-webkit-animation: myAnimate 10s infinite linear;
-o-animation: myAnimate 10s infinite linear;
-ms-animation: myAnimate 10s infinite linear;
}

@-webkit-keyframes myAnimate {
from {
transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
}
to {
transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
}
/* kết thúc hiệu ứng chuyển động */

#ttt2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: #E8E8FF;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}

#ttt3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: #C5E099;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */

}
</style>

<div id="ttt1">ttt1
<div id="ttt2">ttt2
<div id="ttt3">ttt3</div>
</div>
</div>

ttt1

ttt2

ttt3

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

---