Run ❯
<!DOCTYPE html> <html lang="en"> <head> <title>Hiệu ứng css transform scale3d</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .fcwordpress-transform-scale3d-wrap { display: flex; flex-flow: row wrap; max-width: 1000px; margin: 0 auto; } .fcwordpress-transform-scale3d-item { flex-basis: 25%; max-width: 25%; padding: 15px; } * { box-sizing: border-box; margin: 0; padding: 0; } .fcwordpress-transform-scale3d-item img { box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%); max-width: 100%; } .fcwordpress-transform-scale3d-box h3 { text-align: center; font-size: 17px; font-weight: 500; margin-top: 19px; } .fcwordpress-transform-scale3d-box { will-change: transform; transform: perspective(1000px) rotateX( 0deg ) rotateY( 0deg ) scale3d(1, 1, 1); } .fcwordpress-transform-scale3d-box:hover { will-change: transform; transform: perspective(1000px) rotateX( 17deg ) rotateY( 14deg ) scale3d(1, 1, 1); transition: all 300ms ease 0s; } </style> </head> <body> <div class="fcwordpress-transform-scale3d-wrap"> <div class="fcwordpress-transform-scale3d-item"> <div class="fcwordpress-transform-scale3d-box"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"><noscript><img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"></noscript> <h3>Lorem Ipsum is simply dummy text of the printing</h3> </div> </div> <div class="fcwordpress-transform-scale3d-item"> <div class="fcwordpress-transform-scale3d-box"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"><noscript><img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"></noscript> <h3>Lorem Ipsum is simply dummy text of the printing</h3> </div> </div> <div class="fcwordpress-transform-scale3d-item"> <div class="fcwordpress-transform-scale3d-box"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"><noscript><img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"></noscript> <h3>Lorem Ipsum is simply dummy text of the printing</h3> </div> </div> <div class="fcwordpress-transform-scale3d-item"> <div class="fcwordpress-transform-scale3d-box"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"><noscript><img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"></noscript> <h3>Lorem Ipsum is simply dummy text of the printing</h3> </div> </div> <div class="fcwordpress-transform-scale3d-item"> <div class="fcwordpress-transform-scale3d-box"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"><noscript><img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"></noscript> <h3>Lorem Ipsum is simply dummy text of the printing</h3> </div> </div> <div class="fcwordpress-transform-scale3d-item"> <div class="fcwordpress-transform-scale3d-box"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"><noscript><img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"></noscript> <h3>Lorem Ipsum is simply dummy text of the printing</h3> </div> </div> <div class="fcwordpress-transform-scale3d-item"> <div class="fcwordpress-transform-scale3d-box"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"><noscript><img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"></noscript> <h3>Lorem Ipsum is simply dummy text of the printing</h3> </div> </div> <div class="fcwordpress-transform-scale3d-item"> <div class="fcwordpress-transform-scale3d-box"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"><noscript><img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg"></noscript> <h3>Lorem Ipsum is simply dummy text of the printing</h3> </div> </div> </div> </body> </html>
0912889416
