One, foreword

I have written “A Simple Introduction to CSS3 Animation” before, the content of this article is only a simple introduction to the use of CSS3 animation properties, and there is no comprehensive case demonstration, so this chapter as the former content supplement.

The following is a brief description of the 3D effects to be implemented in this chapter:

When the page is loaded, the image displays the “showdown” effect, and when the mouse clicks on the page to slide left or right, the image rotates left or right. When the mouse click on the page to slide or slide, you can change the view of the picture.

Second, the implementation

2.1 the layout

<! DOCTYPE HTML > < HTML onselectStart ="return false"> <head> <meta Charset =" UTF-8 "> <title>3D album </title> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container"> <div id="wrap" class="images"> <img src="images/01.png" alt=""> <img src="images/02.png" alt=""> <img src="images/03.png" alt=""> <img src="images/04.png" alt=""> <img src="images/05.png" alt=""> <img src="images/06.png" alt=""> <img src="images/07.png" alt=""> <img src="images/08.png" alt=""> <img src="images/09.png" alt=""> <img src="images/10.png" alt=""> <img src="images/11.png" alt=""> </div> </div> <script src="script/main.js"></script> </body> </html>Copy the code

Renderings without styles:

2.2 style

Style. CSS file contents:

* { margin: 0px; padding: 0px; } body { background-color: #000; } .container { perspective: 1500px; } .images { width: 100px; height: 100px; margin: 150px auto; position: relative; transform: rotateX(-20deg); transform-style: preserve-3d; /* Toggle 3D effects */}. Images img {position: absolute; box-shadow: 0 0 8px #eee; }Copy the code

Add style renderings:

The image is set to position: Absolute; After that, all the pictures are superimposed on each other.

2.3 event

From the demo, we can see that the 3D effect can be divided into two steps: showdown effect and image rotation effect.

2.3.1 Showdown effect

All pictures are apportioned 360 degrees, and the rotation Angle can be set.

The contents of the main.js file:

window.onload = function() { var wrap = document.getElementById("wrap"); var images = document.getElementsByTagName("img"); var length = images.length; var deg = 360 / length; for (var i = 0; i < length; i++) { images[i].style.transform = "rotateY(" + deg * i + "deg) translateZ(240px)"; Images [length-i-1].style. Transition = "1s "+ 0.2 * I + "s"; }}Copy the code

The demo effect is the same as the motion picture, omitted here.

All images are contained within the div, and when the image is rotateY, the image rotates around that div as the center axis.

The image also sets the transition property, with the first parameter representing the transition time and the second parameter representing the delay time.

2.3.2 Rotation effect

To achieve the image rotation effect, just change the rotation Angle of the center axis.

The complete contents of the main.js file:

window.onload = function() { var wrap = document.getElementById("wrap"); var images = document.getElementsByTagName("img"); var length = images.length; var deg = 360 / length; for (var i = 0; i < length; i++) { images[i].style.transform = "rotateY(" + deg * i + "deg) translateZ(240px)"; Images [length-i-1].style. Transition = "1s "+ 0.2 * I + "s"; } // Click the coordinate var clickX, clickY; Var moveX, moveY; Var minusX, minusY; Var rotateX = 0, rotateY = -20; var timer = null; Document. onmousedown = function(e) {clickX = e.clientx; clickY = e.clientY; This. onmousemove = function(e) {moveX = e.clientx; moveY = e.clientY; MinusX = movex-clickx; minusY = moveY - clickY; RotateX += minusX * 0.1; RotateY -= minusY * 0.1; Wrap. Style. Transform = "rotateX(" + rotateY + "deg)" clickY = moveY; } this.onmouseup = function() {this.onmousemove = null; // Rotation inertia timer = setInterval(function() {minusX *= 0.99; MinusY * = 0.98; RotateX += minusX * 0.2; RotateY -= minusY * 0.1; Transform = 'rotateX(' + rotateY + 'deg) rotateY(' + rotateX + 'deg) '; If (math. abs(minusX) < 0.1 && math. abs(minusY) < 0.1) {clearInterval(timer); }}, 10); }}}Copy the code

Three, the source code

rotate-photo-album