Thuộc tính transform-style: Các thành phần bên trong sẽ giữ vị trí 3D của nó.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 14/05/2016
• Tổng lược xem trang: 110 / 1 khách
• Đánh giá bởi người dùng:

Thuộc tính transform-style: Các thành phần bên trong sẽ giữ vị trí 3D của nó. HTML viết:

<html>
<head></head>
<body>
<div class="styleWrap">
<div class="styleInner">transform style</div>
</div>
</body>
</html>

Để dễ thấy hiệu ứng 3D, ta cho thành phần quay quanh trục. CSS viết:

div.styleWrap {
border: 1px solid #0000cc;
height: 200px;
width: 200px;
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);
}
}

div.style {
background: #cc0000;
height: 180px;
width: 180px;
transform: rotateX(45deg) translateZ(50px);
-moz-transform: rotateX(45deg) translateZ(50px);
-webkit-transform: rotateX(45deg) translateZ(50px);
-o-transform: rotateX(45deg) translateZ(50px);
-ms-transform: rotateX(45deg) translateZ(50px);
}

Thêm thuộc tính transform-style với giá trị preserve-3d, CSS viết:

div.styleWrap {
border: 1px solid #0000cc;
height: 200px;
width: 200px;
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;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}

@-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);
}
}

div.style {
background: #cc0000;
height: 180px;
width: 180px;
transform: rotateX(45deg) translateZ(50px);
-moz-transform: rotateX(45deg) translateZ(50px);
-webkit-transform: rotateX(45deg) translateZ(50px);
-o-transform: rotateX(45deg) translateZ(50px);
-ms-transform: rotateX(45deg) translateZ(50px);
}

Thêm thuộc tính transform-style với giá trị flat, CSS viết:

div.styleWrap {
border: 1px solid #0000cc;
height: 200px;
width: 200px;
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;
transform-style: flat;
-moz-transform-style: flat;
-webkit-transform-style: flat;
-o-transform-style: flat;
-ms-transform-style: flat;
}

@-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);
}
}

div.style {
background: #cc0000;
height: 180px;
width: 180px;
transform: rotateX(45deg) translateZ(50px);
-moz-transform: rotateX(45deg) translateZ(50px);
-webkit-transform: rotateX(45deg) translateZ(50px);
-o-transform: rotateX(45deg) translateZ(50px);
-ms-transform: rotateX(45deg) translateZ(50px);
}

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt