transform
- transform is a CSS property
- The Transform attribute is applied to the 2D or 3D transformation of the element. This property allows you to rotate, scale, move, tilt, etc. the element.
Need to make some three-dimensional 3D effects in the webpage, such as book page turning
There is a rotate attribute in tansform
| Attributes | Features |
|---|---|
| rotate(angle) | Define 2D rotation and specify the angle in the parameter. |
| rotate3d(x,y,z,angle) | Define 3D rotation. |
| rotateX(angle) | Define the 3D rotation along the X axis. |
| rotateY(angle) | Define the 3D rotation along the Y axis. |
| rotateZ(angle) | Define the 3D rotation along the Z axis. |
The page turning of the book is mainly to turn the book left and right around the axis of the book
The example is the book from the closed state to the open state.
First define a book div
<style>
.outbookPage {
margin: 100px auto;
width: 586px;
height: 632px;
perspective: 2000px;
background:gray ;
box-shadow: 0 0 10px #999;
}
</style>
<div class="outbookPage">
</div>
effect:
Set the perspective in this div, which is the distance of the user relative to the screen. After the page turning effect appears, the closer the perspective value is, the more obvious the turning effect will be.
Write the child div element to be rotated in the outbookPage
<style>
.outbookPage {
margin: 100px auto;
width: 586px;
height: 632px;
perspective: 2000px;
background:gray ;
box-shadow: 0 0 10px #999;
}
.innerBookPage {
width: 100%;
height: 100%;
background-color: #333333;
/* 向外面旋转 */
transform: rotateY(-40deg);
transform-origin: 0 0;
font-size: 40px;
text-align: center;
color: white;
z-index: 5;
}
</style>
<div class="outbookPage">
<div class="innerBookPage">
封面
</div>
</div>
Effect: Currently it is a static effect. If you want to make a complete animation page turning effect, you can use animation, but it should be noted that animation can only support IE10+.
tansform:rotateY (defined angle) represents the 3D rotation of the div element around the Y axis. rotateY also only supports IE10+.
After the cover div is rotated to the back, you can use backface-visibility: hidden; to hide the back.
At this time, the cover is rotated to the general and disappear
In order to make the first page disappear after the cover is rotated halfway, you can add a sibling element to the cover div, that is, the div of the first page.
Note that the div on the first page here needs to be flipped 180 degrees so that it can be displayed in the forward direction after being rotated.
Also need to hide back: backface-visibility: hidden;
Complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outbookPage {
margin: 100px auto;
width: 586px;
height: 632px;
perspective: 2000px;
background:gray ;
background-position: 100% 0%;
box-shadow: 0 0 10px #999;
}
.innerBookPage {
width: 100%;
height: 100%;
background-color: #333333;
/* 向外面旋转 */
transform: rotateY(-20deg);
transform-origin: 0 0;
animation: openbook 3s forwards;
font-size: 40px;
text-align: center;
color: white;
backface-visibility: hidden;
z-index: 5;
}
.innerfirstPages {
width: 100%;
height: 100%;
background: burlywood;
background-size: 100% 100%;
position: absolute;
top: 0;
left: -100%;
font-size: 40px;
text-align: center;
animation: openbook2 3s forwards;
transform: rotateY(180deg);
transform-origin: 100% 0;
backface-visibility: hidden;
}
@keyframes openbook{
0%{
transform: rotateY(0deg) scaleX(1);
}
100%{
transform: rotateY(-180deg) scaleX(1);
}
}
@keyframes openbook2{
0%{
transform: rotateY(180deg) scaleX(1);
}
100%{
transform: rotateY(0deg) scaleX(1);
box-shadow: 0 0 10px #999;
}
}
</style>
</head>
<body>
<div class="outbookPage">
<div class="innerBookPage">
封面
</div>
<div class="innerfirstPages">
第一页内容
1111111111111
222222222222222
</div>
</div>
</body>
</html>
effect:
