Cool album, learn to vindicate
This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021
The previous summary of 2D/3D conversion is the knowledge point, just want to a little practice. Get ready to write a nice photo album. The effect is shown below.
1. Analyze and implement
So let’s analyze it. The structure of this picture. We want to know the effect of rotation on each axis of x,y, and z. For more information about 2D/3D panning, see the CSS3 2D/3D conversion manual
1. To get all the images out of a div, start with six images in a container, overlapping on a plane
We should control the size of the picture is the same, otherwise the effect will not be good.
<style>
* {
padding: 0;
margin: 0;
}
body {
/* Perspective, depth of field */
perspective: 800px;
background: # 000;
}
#warp {
width: 200px;
height: 300px;
border: 1px solid red;
margin: 240px auto;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(0deg);
}
img {
width: 200px;
height: 300px;
position: absolute;
}
</style>
<body>
<div id="warp">
<img src="./img//tx.jpg">
<img src="./img/touxiang1.jpg">
<img src="./img/touxiang2.jpg">
<img src="./img/touxiang3.jpg">
<img src="./img/touxiang4.jpg">
<img src="./img/touxiang5.jpg">
</div>
</body>
Copy the code2. The six pictures form a circle, so we should rotate each picture at a certain Angle. The rotation Angle is360/ Number of picturesAnd we want to translate every image out, so translateZ(), out of the z axis.
<script>
var x = 360 / document.querySelectorAll("img").length;// Get the rotation Angle
document.querySelectorAll("img").forEach(function (item, index) {// Walk through all the images
item.style.transform = "rotateY(" + index * x + "deg) translateZ(300px)"// Rotate the Angle
})
</script>
Copy the codeAt this point the effect goes like this:
3. The album is already out, we just need to add the mouse event to control its rotation
We want to calculate the distance difference of the mouse movement, distance difference = the current coordinates – last coordinates. And then you take your current coordinates and you add the distance difference.
So the last coordinate was click and that’s the whole idea. Detailed comments are in the code.
Complete code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<div id="warp">
<img src="./img//tx.jpg">
<img src="./img/touxiang1.jpg">
<img src="./img/touxiang2.jpg">
<img src="./img/touxiang3.jpg">
<img src="./img/touxiang4.jpg">
<img src="./img/touxiang5.jpg">
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
}
body {
/* Perspective, depth of field */
perspective: 800px;
background: # 000;
}
#warp {
width: 200px;
height: 300px;
border: 1px solid red;
margin: 240px auto;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(0deg);
}
img {
width: 200px;
height: 300px;
position: absolute;
}
</style>
<script>
window.onload = function () { // When the browser loads
var x = 360 / document.querySelectorAll("img").length;// Get the rotation Angle
document.querySelectorAll("img").forEach(function (item, index) {// Walk through all the images
// console.log(item)
item.style.transform = "rotateY(" + index * x + "deg) translateZ(300px)"// Rotation Angle and translation
item.style.zIndex = -index
// Animation, transition
item.style.transition = "transform 1s " + index * 0.1 + "s"// Start animation})}// Click and drag to release (change the rotation degree of the container)
// Distance difference current mouse coordinate - last mouse coordinate
var nowx, nowy, lastx, lasty; // The current and last coordinates
var diffx, diffy;/ / distance
var rox = -15, roy = 0;// The total rotation degree should be the same as the starting value
var warp = document.getElementById("warp");
document.onmousedown = function (el) { //el is an event object
console.log(el.clientX, el.clientY)
lastx = el.clientX, lasty = el.clientY;// Get the mouse click coordinates
this.onmousemove = function (el) { // Mouse movement events
nowx = el.clientX;
nowy = el.clientY;
/ / TODO
diffx = nowx - lastx;
diffy = nowy - lasty;
roy += diffx;
rox -= diffy;
warp.style.transform = "rotateX(" + rox + "deg) rotateY(" + roy + "deg)"
lastx = nowx;
lasty = nowy;
}
this.onmouseup = function () {// Mouse release event
this.onmousemove = null
this.onmouseup = null}}</script>
</html>
Copy the codeWrite in the last
This effect is still very simple, but enough to master THE CSS3 2D/3D conversion of knowledge, also relatively cool. In particular, the z-axis is more abstract and not well illustrated.
Welcome to comment and exchange.
Drivel:
The sunset glow today is so beautiful, I want to share with you, but we have not talked for a long time. Later think, today’s sunset is not more beautiful
