transform

  • Transform is a CSS property
  • The Transform property applies to 2D or 3D transformations of elements. This property allows you to rotate, scale, move, tilt, etc.



    Some three-dimensional 3D effects need to be made in the web page, such as turning pages of a book

The TansForm has a rotate property

attribute function
rotate(angle) Define 2D rotation, specifying angles in parameters.
rotate3d(x,y,z,angle) Define 3D rotation.
rotateX(angle) Defines a 3D rotation along the X axis.
rotateY(angle) Define 3D rotation along the Y-axis.
rotateZ(angle) Define 3D rotation along the Z axis.

The page turning of the book is mainly around the axis of the book

The example defines a book div from the closed state to the open state

<style>
	.outbookPage {
		margin: 100px auto;
		width: 586px;
		height: 632px;
		perspective: 2000px;
		background:gray ;
		box-shadow: 0 0 10px #999;
	}
</style>
<div class="outbookPage">			
</div>
Copy the code

Effect:

Set the perspective in this div, which is how far the user is relative to the screen. The closer the perspective value is when the flip effect appears, the more obvious the flip effect will be.

Write the child div element to rotate in 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; /* Rotate out */ 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">Copy the code

Effects: This is a static effect. If you want to create a full page turning effect, you can use an animation, but note that animation only supports IE10+.

Tansform :rotateY(defined Angle) stands for 3d rotation of the DIV element around the Y-axis. RotateY also only supports IE10+

Use backface-visibility: hidden after the cover div is rotated to the back; Hide the back.

The cover then rotates to normal and disappears

To make the cover disappear halfway to the first page, add a sibling element to the cover div, the div of the first page.

Notice here that the div on the first page needs to be rotated 180 degrees so that it can be rotated forward. Also need to use the back hide: 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; /* Rotate out */ 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"> Cover </div> <div 1111111111111 222222222222222222222 </div> </body> </ HTML >Copy the code

Effect: