preface
You dragon angelica sea, the sea does not welcome me! Fallen leaves when the root, the root does not welcome me three immortals! Cloud crane angelica day, day does not welcome my wonderful wood fairy! Tiger Angelica mountain, mountain does not welcome me big hero!
Results show
Implementation approach
We can use pseudo-class elements to form the top side and the right side of the book. Using the Transform: Skew () attribute, we can define a slanted transform element. Meanwhile, we can add inside and outside shadow effect to the parent element to make it look fuller. Of course, in order to render the 3D effect well, it is also necessary to set the viewing distance and reserve 3D position for the child elements. Finally, when the mouse floats over the element, the picture of intimate paradise on the title page rotates on the Y-axis, so as to achieve the effect of turning pages ~~
The following code
HTML
//HTML
<body>
<div class="content">
<div class="imgBox">
<img src="./images/ Make-out paradise.jpg" style="height:400px; width:300px" />
</div>
<div class="details">
<h2>You Have Only One Life</h2>
<br />
<p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream; go where you want to go; be what you want to be,because you have only one life and one chance to do all the things you want to do.</p>
</div>
</div>
</body>
Copy the codeCSS
//CSS
@import url('https://fonts.font.im/css? family=Quicksand');
* {
margin: 0;
padding: 0;
}
body {
background: #FF8000;
overflow: hidden;
font-family: 'Quicksand', sans-serif;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) perspective(2000px);
height: 400px;
width: 300px;
background-color: #fff;
transform-style: preserve-3d;
box-shadow: inset 300px 0 50px rgba(0.0.0.0.5), 0 20px 100px rgba(0.0.0.0.5);
}
.content:hover {
transform: translate(-50%, -50%) perspective(2000px) rotate(-10deg);
box-shadow: inset 20px 0 50px rgba(0.0.0.0.5), 0 10px 100px rgba(0.0.0.0.5);
}
.content::before {
content: ' ';
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 5px;
background: #DBA901;
/* transform-origin can change the position of the transformed element, but must be used with the transform attribute */
/* Here the element is slanted by 2D, but at the center of the element, so there will be a protrusion to the left, so we need to define where to convert */
transform-origin: bottom;
/* The skew() attribute uses the X axis vertically and the Y axis horizontally. If you remember which axis is set, the length of that axis will be stretched. The X axis will rotate counterclockwise and the Y axis will rotate clockwise */
transform: skewX(-45deg);
}
.content::after {
content: ' ';
position: absolute;
top: 0;
right: -5px;
width: 5px;
height: 100%;
background: #FFBF00;
transform-origin: left;
transform: skewY(-45deg);
}
.imgBox {
width: 100%;
height: 100%;
position: relative;
transform-origin: left;
transition: 1s cubic-bezier(15..1.7.84... 58);
}
.content:hover .imgBox {
transform: rotateY(-135deg);
}
.details {
position: absolute;
top: 0;
left: 0;
/ * z - the index must be in positioning elements (position: relative/absolute/fixed/sticky) is valid in * /
z-index: -1;
padding: 20px;
box-sizing: border-box;
user-select: none;
}
Copy the codeThe transform-origin attribute can change the base point position of the transformed element. By default, the transform is the element’s own center point, but it must be used in conjunction with the transform attribute. 2. The coordinate axis of the skew() attribute is different from the mathematical coordinate axis, the vertical direction is X axis, the horizontal direction is Y axis. The specific effect just need to remember which axis is set, the length of that axis will be stretched. 3. Z – the index attribute to specify the stacking order of an element, but must be in positioning elements (position: relative/absolute/fixed/sticky) – that is, not on the static positioning properties. Note that if the parent element positon: relative or the current z-index element is a floating element, z-index will be invalid ~