Tạo Animated Books Với CSS 3D Transforms

Trong bài viết này mình giới thiệu cách animated books với CSS 3D transforms và transitions. Đối với demo này thì chúng ta sử dụng chủ yếu 2 sự kiện là hover on và hover off

Hover on

Khi chúng ta mở sách , Tờ giấy bìa chuyển z-index từ 100 -> 0 Các tờ giấy sẽ chuyển động lần lượt tạo hiệu ứng mượt

.book:hover > .hardcover_front {
	transform: rotateY(-145deg) translateZ(0);
	z-index: 0;
}

.book:hover > .page li:nth-child(1) {
	transform: rotateY(-30deg);
	transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
	transform: rotateY(-35deg);
	transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
	transform: rotateY(-118deg);
	transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
	transform: rotateY(-130deg);
	transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
	transform: rotateY(-140deg);
	transition-duration: 1.2s;
}

Hover off

Khi đóng sách

.hardcover_front{
	transition: all 0.8s ease, z-index 0.6s;
}

.page > li {
	awidth: 100%;
	height: 100%;
	transform-origin: left center;
	transition-property: transform;
	transition-timing-function: ease;
}

.page > li:nth-child(1) {
	transition-duration: 0.6s;
}

.page > li:nth-child(2) {
	transition-duration: 0.6s;
}

.page > li:nth-child(3) {
	transition-duration: 0.4s;
}

.page > li:nth-child(4) {
	transition-duration: 0.5s;
}

.page > li:nth-child(5) {
	transition-duration: 0.6s;
}

Ảnh Bìa

Muốn thay đổi ảnh bìa thì đặt link ảnh thay thế

<img src = "" awidth = "100%" height = "100%"> </ img>

Ví Dụ Demo

https://codepen.io/But/pen/RLzJOO