Giới Thiệu Chung

Hôm nay mình muốn giới thiệu đến cho các bạn một bài viết liên quan đến HTML và CSS giúp các bạn có thể nắm vững hơn các kiến thức thông qua các ví dụ thực tế và hài hước.

Hiệu ứng xoay 3D không còn quá xa lạ đối với các anh em developer. Bài này phù hợp cho các bạn newbie muốn làm một sản phẩm hay ho gì đó trong quá trình mình học tập để nâng cao kiến thức thì bài viết này rất là bổ ích cho các bạn.

Bắt Đầu Code Thôi Nào

Ý tưởng của mình là sử dụng animation và transform để làm hiệu ứng xoay tròn bằng cách chúng ta sẽ dựng 6 bức ảnh thành một hình hộp đứng rồi cho nó xoay 360deg.

Code HTML

các bạn code hiển thị các ảnh cần làm hiệu ứng. Các bạn có thể thay đổ ảnh theo sở thích nha. Mình dùng ảnh gái xinh code cho nó máu :))

<div id="container">
  <div class="cover">
   <div class="front" >
     <img src="https://zicxa.com/hinh-anh/wp-content/uploads/2019/09/T%E1%BB%95ng-h%E1%BB%A3p-h%C3%ACnh-%E1%BA%A3nh-nh%E1%BB%AFng-ng%C6%B0%E1%BB%9Di-c%C3%B3-r%C4%83ng-kh%E1%BB%83nh-d%E1%BB%85-th%C6%B0%C6%A1ng-nh%E1%BA%A5t-19.jpg">    
    </div>
   <div class="back" >
     <img src="https://thuthuatnhanh.com/wp-content/uploads/2019/12/anh-girl-rang-khenh.jpg">     
    </div>
     <div class="top" >
     <img src="https://giupban.com.vn/wp-content/uploads/2019/09/anh-hot-girl-lanh-lung-12.jpg">       
    </div>
   <div class="bottom" >
     <img src="https://nhakhoachoban.vn/wp-content/uploads/2019/09/bi-mat-cua-chiec-rang-khenh-3-1.jpg"></div>
   <div class="left" >
     <img src="https://image.thanhnien.vn/660/uploaded/phunggiao/2018_12_03/misthy-2_layc.jpg">
    </div>
   <div class="right">
     <img src="https://znews-photo.zadn.vn/w660/Uploaded/mdf_uswreo/2019_01_30/13.jpg">    
    </div>
  </div>
 </div>

Code CSS

Đây là phần quan trọng nhất để giúp ảnh có thể xoay được. Thì code CSS mình cũng sẽ dùng những thuộc tính đợn giản như là: transform, transform-origin và @keyframes,...

body{
 margin:0;
 padding:0;
 background-color:light-blue;
}
#container{
 width:350px;
 height:350px;
 margin:auto;
 perspective:880px;
 margin-top:110px;
}
.cover{
 width:400px;
 height:400px;
 animation:flip-animate 20s linear infinite; /*   Làm xoay các ảnh */
 transform-style:preserve-3d; /*   các thành phần bên trong class cover sẽ hiển thị dưới dạng 3D */
}
#container .cover div{
 width:400px;
 height:400px;
 position:absolute;
}
#container .cover div img{
 width:400px;
 height:400px;
}
#container .cover .front{
 transform:translateZ(200px);/*   định vị lại ảnh trong class front dọc theo trục z trong không gian 3D */
}
#container .cover .back{
 transform:rotateY(180deg) translateZ(200px);
/*   xoay ảnh theo trục y là 180 độ và dịch chuyển đến trục Z */
}
#container .cover .left{
 transform:rotateY(-90deg) translateX(-200px);
  /*   xoay ảnh theo trục y là -90 độ và dịch chuyển đến trục X */
 transform-origin:left;/*   Cho phép dịch chuyển phần tử sang trái */
  
}
#container .cover .right{
 transform:rotateY(90deg) translateX(200px);/*   xoay ảnh theo trục Y là 90 độ và dịch chuyển đến trục X */
 transform-origin:right;/*   Cho phép dịch chuyển phần tử sang phải */
}
#container .cover .top{
 transform:rotateX(-90deg) translateY(-200px);/*   xoay ảnh theo trục X là -90 độ và dịch chuyển đến trục Y */
 transform-origin:top;/*   Cho phép dịch chuyển phần tử lên trên */
}
#container .cover .bottom{
 transform:rotateX(90deg) translateY(200px);/*   xoay ảnh theo trục X là 90 độ và dịch chuyển đến trục Y */
 transform-origin:bottom;/*   Cho phép dịch chuyển phần tử xuống dưới */
}
@keyframes flip-animate{
 0%{transform:rotateY(0);}
 100%{transform:rotateY(360deg);}
}/* điều khiển các hiệu ứng của thuộc tính animation */

Các bạn xem kết quả mà mình đã code trên codepen nha.

Lời Kết

Vậy là xong bài Hướng Dẫn Làm Hiệu Ứng Xoay Ảnh 3D. Các bạn tự code vừa để ôn lại kiến thức vừa giúp các bạn thư giản.

Nếu mọi người cảm thấy bài viết này hay thì có thể ủng hộ mình để mình có động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!