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

This article is about how to use pure CSS to achieve a rotating Rubik's cube. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In general, we need to implement the following two main functions:

Build a cube that can rotate so that the cube has the characteristics of basic rotation.

But before completing the above two points, we need to know or familiarize ourselves with the basics of CSS3 to implement its functions again:

Transitiontransformperspectivepreserve-3danimationtransition attribute-transition effect transition: property duration timing-fucntion delay

This attribute should be familiar, not too much, but simply lists all the sub-attributes it has.

Transition attribute-transition duration-transition function (curve)-transition delay

Transition-timing-function: linear | ease | ease-in | ease-out | basic transition function transform attribute native to ease-in-out;-2D or 3D conversion of elements

It has several commonly used transformation methods: scale scale3d translate translate3d rotate rotate3d and so on.

Transform-origin: x-axis y-axis zmuraxis; set the base point position of the rotated element transform-style: preserve-3d; so that the transformed child element retains the 3D transformation (used with perspective) the perspective attribute-make the element 3D transparent = visual effect perspective: 1000px; it has two ways of writing transform: perspective (1000px)

This property gives the object a stereoscopic 3D penetration effect. The higher the value, the farther away the object is from our eyes to see the object on the screen. On the contrary, the smaller the value, the closer it is to our viewing angle, that is, the larger the size displayed on the screen. It works with preserve-3d to build a stage perspective on the parent element that needs to achieve 3D effects, so that its child elements can achieve real 3D transformation.

A basic cube needs to be implemented by combining the above three attributes.

Cube

Important CSS styles. Cube-wrap {width: 300px; height: 300px; perspective: 1000px; position: relative;}. Cube-wrap .cube {width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: all .5s ease;}. Cube-wrap .cube. Cube-face {width: 100%; height: 100%; position: absolute; overflow: hidden; opacity: 0.9 Border: 1px solid # ccc;}. Cube-wrap .cube. Cube-face img {width: 100%; height: 100%;} .cube-face.front {transform: translateZ (150px);} .cube-face.back {transform: rotateX (180deg) translateZ (150px);} .cube-face.left {transform: rotateY (- 90deg) translateZ (150px);} .cube-face.right {transform: rotateY (90deg) translateZ (150px) }. Cube-face.top {transform: rotateX (90deg) translateZ (150px);} .cube-face.bottom {transform: rotateX (- 90deg) translateZ (150px);}

Here we use perspective and preserve-3d for the parent element, and then the 3D transformation effect of the child element will take effect.

So the point is, how is the above code spliced into a complete cube? If you take a closer look in the browser developer's tool, it is not difficult to see that the element named cube is located on the right side of the cube. So we have an idea on how to use the code to construct every side of the cube.

First of all, it is necessary to know the direction of the x, y, z axes of the spatial Cartesian coordinate system established during the transform correlation transformation.

That is, the computer screen is the plane, the horizontal direction is the x-axis, the vertical direction is the y-axis, and the vertical direction is the z-axis.

So how to build the six faces of the cube becomes very simple. The initial position of the cube face is in the middle, and the length of the whole cube is 300px, so translateZ (150px) is the front. To construct a back face, you first need to reverse the initial face 180deg counterclockwise, and the front face points to the back, so you only need to translateZ (150px). To construct the left side, you need to rotate rotateY (- 90deg) around the y-axis, and the corresponding right side is rotateY (90deg), then translate the translateZ (150px), and the remaining two faces follow the corresponding logic. It should be noted that when a face rotates around the axis, the counterclockwise rotation is positive and clockwise is negative.

Animation attribute

This attribute is certainly the most important in CSS3 animation, and each of its sub-attributes is worthy of our careful study.

Animation: name duration timing-function delay iteration-count direction fill-mode play-state;animation-delay: 1s; set to a negative value to start the animation immediately, and skip the animation from 1 second ago animation-direction: normal | reverse | alternate | alternate-reverse Define whether to cycle alternately and reverse play the animation alternate animation in an odd number of times (1, 3, 5...), reverse play the alternate-reverse animation in an even number of times (2, 4, 6...), reverse the alternate-reverse animation in an odd number of times (1, 3, 5...), and play animation-fill-mode: none in an even number of times (2, 4, 6...). | forwards | backwards | both Specifies that when the animation is not played, the style to be applied to the element forwards stays at the last frame after the end of the animation backwards starts the animation's first frame attribute both during animation-delay to achieve the effects of forwards and backwards at the same time animation-play-state: paused | running; controls the animation to pause or run. @ keyframes sets animation keyframes. Here we use from...to or percentage to achieve custom animation animation details.

Let's add animation animation to the cube that has been built:

. cube-wrap .cube {. Animation: spin 10s linear infinite;} @ keyframes spin {from {transform: rotateX (45deg) rotateY (45deg);} to {transform: rotateX (405deg) rotateY (765deg);}} Carousel

Now that we have achieved the cube effect that can rotate freely, we need to complete the basic functions of carousel.

Left and right button toggle bottom button toggle

Before implementing these two functions, we need to know about two powerful HTML tags that work together to achieve the click-to-switch effect in the rotation diagram. They are label and input tags, so let's take a look at their basic usage.

Click the label tag, and the input tag with id 1 is selected

Here, the for in the label tag is associated with the id in the input tag, and when type is radio in the input tag, it is the effect of a selection box, which has a checked attribute (to achieve the effect of a radio box, you need to set the name= "xxx". The name should be the same, which is used below)

Let's start to achieve concrete results now.

. First implement the CSS style .cube _ left. Cube _ action {left:-75px; top: 50%; transform: translateY (- 50%);} .cube_right .cube _ action {right:-75px; top: 50%; transform: translateY (- 50%);} .cube_action {background-color: # fafafa; border-radius: 50%; cursor: pointer; display: none; width: 40px; height: 40px Opacity: 0.15; position: absolute; transition: opacity 0.5s ease; z-index: 5;}. Cube_action:hover {opacity: 1;} .cube_action::before {border-bottom: 4px solid # 111; border-right: 4px solid # 111; content:'; display: block; height: 25%; left: 50%; position: absolute; top: 50%; width: 25% Transform: translate (- 70%,-50%) rotate (- 45deg);} .cube_left .cube _ action::before {transform: translate (- 40%,-50%) rotate (135deg);} .customers {position: absolute; left: 0; right: 0; bottom:-80px; padding: 20px; text-align: center; opacity:0; transition: opacity .3s;} .container:hover. Opacity: 1 } .indicators {background-color: # fafafa; border-radius: 50%; cursor: pointer; display: inline-block; width: 14px; height: 14px; margin: 6px; opacity: .15;} .controller {display: none;}

After writing the above code, we can't see the results we want, because they all need the hover event to trigger.

Now let's style the outermost container and define an entry animation.

.container {width: 600px; height: 600px; position: absolute; top: 50%; left: 50%; margin-top:-300px; margin-left:-300px; transition: all .5s ease; transform: scale (0.25);} .container:hover {transform: scale (1);} .container:hover. Cube-wrap .cube {animation: entrance .5s ease @ keyframes entrance {from {transform: rotateX (- 225deg) rotateY (- 225deg);}}

When the mouse moves into the cube, the animation is replaced by spin with entrance.

So the focus is once again, how on earth does CSS achieve click-to-switch rotation of pictures?

The principle is very simple, in fact, with the aforementioned label tags and input tags to achieve amazing results.

.controller: nth-of-type (1): checked ~ .cube {transform: translateZ (- 150px);} .controller: nth-of-type (2): checked ~ .cube {transform: translateZ (- 150px) rotateX (- 180deg);} .controller: nth-of-type (3): checked ~ .cube {transform: translateZ (- 150px) rotateY (90deg);} .controller: nth-of-type (4): checked ~ .cube {transform: translateZ (- 150px) rotateY (- 90deg) } .controller: nth-of-type (5): checked ~ .cube {transform: translateZ (- 150px) rotateX (- 90deg);} .controller: nth-of-type (6): checked ~ .cube {transform: translateZ (- 150px) rotateX (90deg);}

Whether you click the left or right button or the button at the bottom, we trigger the for attribute of the label tag to link the checked attribute in the corresponding input tag.

As for how to reverse the corresponding side to the opposite side of the screen, you only need to reverse the symbol in the transformation of each side of the construction cube.

It is worth noting that the CSS selector we use here is also a technique: nth-of-type (n) selects the nth tag of the same type of tag, and the ~ symbol selects the tag in the same level.

Now let's go back and take a closer look at the HTML structure at the beginning. The for in the label tag in the indicators seems to be able to understand its logic, that is, the checked attribute of the input tag will be triggered by clicking on the tag to make the corresponding 3D conversion. But why does the order of the for numbers in the label tag in the left and right buttons look wrong?

It took me a long time to figure out that the corresponding six label tags in .cube _ left or .cube _ right coincide with each other, and they are all display:none, which is very interesting. Let's take a look at the following code.

.container: hover .controller: nth-of-type (1): checked ~ .cube _ left .cube _ action:nth-of-type (1), .container: hover .controller: nth-of-type (1): checked ~ .cube _ right. Cube _ action:nth-of-type (1) {display: block } .container:hover .controller: nth-of-type (2): checked ~ .cube _ left .cube _ action:nth-of-type (2), .container: hover .controller: nth-of-type (2): checked ~ .cube _ right .cube _ action:nth-of-type (2) {display: block } .container:hover .controller: nth-of-type (6): checked ~ .cube _ left .cube _ action:nth-of-type (6), .container: hover .controller: nth-of-type (6): checked ~ .cube _ right. Cube _ action:nth-of-type (6) {display: block;}

Now our default is that the first element in controller is selected, that is, its checked attribute is true. So the first one in the label tab in the left and right button is display:block. If you click the button on the left now, we want the bottom of the cube to appear on the front of the screen, so for should be set to 6. If you click the button on the right, the for of the first label tab should be set to 2. Following this logic, we can see why the for attribute in .cube_left or .cube _ right is out of order.

Thank you for reading! This is the end of this article on "how to use pure CSS to achieve a rotating Rubik's cube". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.