Tạo hiệu ứng động 3D với CSS3

Tạo hiệu ứng động đối với CSS3, có lẽ đối với nhiều người đã không còn quá xa lạ từ khi nó ra đời. Nhưng CSS3 không chỉ dừng lại ở có thế mà nó còn tạo hiệu ứng 3D cực kỳ đẹp mắt không khác gì mấy so với các phần mềm tạo ảnh động chuyên nghiệp.
Nếu bạn nào vẫn chưa tin thì có thể xem demo bên dưới thì rõ (các bạn nên xem trên các trình duyệt như Firefox hoặc Chrome nhé, đừng sử dụng IE , vì trình duyệt này vẫn còn chưa hỗ trợ nhiều cho CSS3 , nhất là các   phiên bản cũ) .

Xem Demo | Download

Bước 1 : HTML

Các bạn cần có bộ khung chuẩn html như sau :

<div class="book-container">

    <div class="book">

        <div class="book-cover">
            <img src="images/cover.jpg" />
        </div>

        <div class="book-spine">
            <h1>The Book's Spine Text</h1>
        </div>

    </div>

</div>

Bước 2 : Phần CSS

Các bạn copy đoạn css sau :

/* Book
----------------------------------------------------- */
.book-container {
    awidth: 375px;
    margin: 0 auto;
    display: block;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}

.book {
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    transition: 0.75s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 125px 0;
    -moz-transform-origin: 125px 0;
    transform-origin: 125px 0;
}
.book:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    awidth: 7px;
    background: url(images/ridge.png) repeat-y; z-index: 20;
    -webkit-transform: translateZ(1px); /* Fix for flickering in Chrome  */
}
.book:hover {
    -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
    -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
    transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
}

/*
Book cover and spine
---------------------------------------------------------------------------------------------------------------------------------------------------- */
.book-cover { position: relative; z-index: 10; }
.book-cover img { vertical-align: bottom; max-awidth: 100%; height: auto; }

.book-spine {
    position: absolute;
    color: #fff;
    bottom: 0;
    top: 0;
    awidth: 50px;
    z-index: 5;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    background: url(images/spine.jpg) -64px 0 no-repeat;
    background-size: auto 100%;
    -webkit-transform: rotateY(-90deg) translateX(-49px);
    -moz-transform: rotateY(-90deg) translateX(-49px);
    transform: rotateY(-90deg) translateX(-49px);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}
.book-spine h1 {
    display: block;
    awidth: 325px;
    text-align: left;
    color: #fff;
    position: absolute;
    top: 0;
    left: 39px;
    text-indent: 43px;
    text-transform: uppercase;
    font-family: "league_gothic_condensedRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2em; opacity: 0.75; font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}
.book-spine:before { display: block; content: ""; awidth: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); }

Vậy là xong rồi đó các bạn, thủ thuật ở đây là nếu các bạn khéo léo biết kết hợp giữa thuộc tính transform và transition là các bạn có thể làm được nhiều hiệu ứng 3D khác nhau. Mình hy vọng , qua bài viết này, các bạn có thể tự sáng tạo ra nhiều mẫu 3D khác, nhớ chia sẻ cho mình và các bạn khác biết nếu bạn làm được điều đó nhé.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster