Shulou(Shulou.com)06/01 Report--

This article mainly introduces css how to achieve the rotation of the picture, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1. Construct the frame of image rotation.

The first is HTML. It is a bit difficult to read because we delete any spaces between elements or enter. This makes it easier to use JavaScript to reference different images-spaces or lines-to create new nodes in some browsers.

←

→

As you can see, there is not much to explain. The gallery is included in DIV, including listed photos / links, followed by navigation links with onclick events.

2. Arrange photos in 3D space

The shape is more complex. What we do here is to shape the first five photos into concave shapes and hide any additional photos (temporarily). The external photos are rotated 60 degrees, and the adjacent photos are rotated 30 degrees. The central photo is carried off the page.

# stage {

Margin:1emauto

Height:120px

}

# rotator {

Position:absolute

White-space:nowrap

-webkit-perspective:1200px

-moz-perspective:1200px

}

# rotatoraimg {

Position:relative

Padding:10px

Border:1pxsolid#ccc

Vertical-align:middle

}

# rotatora:nth-child (1) img {

-webkit-transform-origin:100%50%0

-webkit-transform:rotateY (- 60deg)

-moz-transform-origin:100%50%0

-moz-transform:rotateY (- 60deg)

}

# rotatora:nth-child (2) img {

-webkit-transform-origin:050%0

-webkit-transform:rotateY (- 30deg)

-moz-transform-origin:050%0

-moz-transform:rotateY (- 30deg)

}

# rotatora:nth-child (3) img {

-webkit-transform:translateZ (220px)

-moz-transform:translateZ (220px)

}

# rotatora:nth-child (4) img {

-webkit-transform-origin:100%50%0

-webkit-transform:rotateY (30deg)

-moz-transform-origin:100%50%0

-moz-transform:rotateY (30deg)

}

# rotatora:nth-child (5) img {

-webkit-transform-origin:050%0

-webkit-transform:rotateY (60deg)

-moz-transform-origin:050%0

-moz-transform:rotateY (60deg)

}

# rotatora:nth-child (nasty 6) {

Display:none

}

To reference a single photo / link, we used the nth-child pseudo-class (if not clear, it was described in the previous article [nth-child () example details of the css pseudo-class]). In this case, the link (A) is the child of the parent DIV. If there is no link, the children will become IMG elements.

3. Rotate the photo

The point you saw earlier, JavaScript (onclick), calls the following function. All they do is take an element from one end of the photo array in DOM and move it to the other end:

FunctionrollRight (el)

{

El.insertBefore (el.lastChild,el.firstChild)

}

FunctionrollLeft (el)

{

El.appendChild (el.firstChild)

}

The JavaScript code should (almost always) be at the bottom of the page.

The first function will contain the node containing the last photo / link (visible or hidden) and place it before the first photo / link. The second function takes the first photo / link and moves it to the end of the line. Using onclick is not the most elegant approach, but for now it is sufficient.

As the nodes move, they take the style assigned to the new location (1pm, 2pm, 3pm, 4pm, 5 or 6 +), so all we need to do is change their position without worrying about moving or rotating.

Thank you for reading this article carefully. I hope the article "how to rotate the picture in css" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.