Ví dụ về thuộc tính transform-style

Thuộc tính transform-style

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>

CSS viết:

div.styleWrap {
    border: 1px solid #0000cc;
    height: 200px;
    width: 200px;
}

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

Hiển thị trình duyệt khi chưa có transform-style:

transform style

Để 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);
}

Hiển thị trình duyệt:

transform style

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

Hiển thị trình duyệt:

transform style

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

Hiển thị trình duyệt:

transform style