Làm thế nào để tạo ra một đứng lên hiệu ứng văn bản 3D với CSS3 biến

Question

tôi đang tìm cách để tái tạo một hiệu ứng như thế này với CSS Transforms 3D:

Làm thế nào để đạt được điều này? Dưới đây là những gì tôi đã có cho đến nay

body { 
 
    perspective: 400px; 
 
    transition: perspective 1s; 
 
} 
 
.grid { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-image: url("http://i.imgur.com/3ACizko.jpg"); 
 
    background-size: cover; 
 
    height: 400px; 
 
    width: 400px; 
 
    transform: rotateX(60deg); 
 
    margin: 0 auto; 
 
    transition: transform 1s; 
 
    perspective: 400px; 
 
} 
 
.grid p { 
 
    transition: transform 1s; 
 
    transform: rotateX(-60deg); 
 
}

<div class="grid"> 
 
    <p>Hello</p> 
 
</div>

tôi nghĩ rằng nếu tôi xoay bề mặt nền 60 độ và xoay văn bản -60 độ nó sẽ hủy bỏ tác động nhưng dường như không?

Dù sao, cảm ơn trước.

Answer 1

Vâng, ther giải pháp cho vấn đề của bạn đang sử dụng chuyển đổi kiểu: bảo tồn-3d.

Nhưng vấn đề với điều này là IE không hỗ trợ bất động sản

này Một cách để làm cho nó làm việc trong IE là sử dụng một yếu tố giả trên p

.grid { 
 
    font-size: 30px; 
 
    position: relative; 
 
    left: 100px; 
 
    top: 200px; 
 
    perspective: 200px; 
 
    perspective-origin: 0% 50%; 
 
} 
 

 
.grid:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 200px; 
 
    top: -100px; 
 
    left: -100px; 
 
    transform: rotateX(30deg); 
 
    background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 47px, black 47px, black 50px), 
 
    repeating-linear-gradient(90deg, transparent 0px, transparent 47px, black 47px, black 50px); 
 
    }

<p class="grid">Hello</p>

Answer 2

Sau một chút nghiên cứu, tôi tự tin đăng câu trả lời của riêng mình.

Hiệu ứng này có thể đạt được bằng cách sử dụng thuộc tính transform-style và đặt thành preserve-3d. Điều này sẽ được đặt thành phần tử cha (trong trường hợp này là .grid). Tôi cũng sử dụng transform-origin:bottom để nâng cao văn bản từ bên trong lưới. Dưới đây là đoạn:

body { 
 
    perspective: 400px; 
 
    transition: perspective 1s; 
 
} 
 
.grid { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-image: url("http://i.imgur.com/3ACizko.jpg"); 
 
    background-size: cover; 
 
    height: 400px; 
 
    width: 400px; 
 
    transform: rotateX(60deg); 
 
    margin: 0 auto; 
 
    transition: transform 1s; 
 
    perspective: 400px; 
 
    transform-style:preserve-3d; 
 
} 
 
.grid p { 
 
    transition: transform 1s; 
 
    transform-origin:bottom; 
 
    transform: rotateX(-60deg); 
 
}

<div class="grid"> 
 
    <p>Hello</p> 
 
</div>