In the end, I applied both approaches using the simple test of the transform-style: preserve-3d. Especially if you want to control the intermediate angle of rotation.įurthermore, if you opened the example in Chrome, you could see that the sides flashed during the rotation. But in this case, you need to transform each side individually. The second cube looks and spins the same as the first. See the Pen wWvdXd by Anna Selezniova ( on CodePen. back Īnd here you can see the new cube in action: Also, I set new properties for each side – transform-origin with a value equal to the position of the cube center and backface-visibility: hidden. And… added it into each 3D transformation, because now every element transforms independently. I didn’t have to interact with the scene as a whole, so I removed the perspective property of the scene element. Note, this property is used to hide the back of the element during 3D transformation. The 3D rotation of an element in the example is very similar to the front side of a cube, isn’t it? That’s what I used.īy the way, didn’t you try to select the checkbox backface-visibility: hidden during 3D rotation? See the Pen rLNmBp by Anna Selezniova ( on CodePen. I have created an interactive example which will help you understand how it works: It is the central point of element transformation. I was looking for a way to create a 3D object without using transform-style: preserve-3d and discovered a useful property: transform-origin. A problem is a chance to learn something new. So, I was upset but wasn’t going to give up. Already know that? Hey, I told you not to peek. In the example above, I replaced preserve-3d to flat. I learned about this, looking at my favorite (see Notes #1). The fact is that Internet Explorer doesn’t support the property transform-style with the value preserve-3d. See the Pen XKWMwV by Anna Selezniova ( on CodePen.
However, don’t peek into the source code until you have read the paragraph under the example.
I changed one property that had resulted in the cube displayed wrong in the Internet Explorer. To get an idea of what I’m talking about, have a look at the example below in your favorite browser. The picture I saw in the Internet Explorer plunged me into depression. To consider the task complete, I had to test the result in different browsers. A perspective is the depth of the scene, and it depends on the sizes of the objects it contains.Ĭonst offset = dimension / ( 2 * Math.
To create a 3D object, I needed an element (let’s call it “scene”) with a perspective. The Z-axis zero value is in the plane of the screen. The X-axis is horizontal, the Y axis is vertical, and the Z-axis comes out from inside the screen. The picture below shows how the axes are directed in a browser.Ī right-handed three-dimensional Cartesian coordinate system with the Z-axis pointing towards the viewer. The Cartesian coordinate system for a three-dimensional space is an ordered triplet of lines (axes) that are pair-wise perpendicular, have a single unit of length for all three axes and have an orientation for each axis. The same as axes in the three-dimensional Cartesian coordinate system, which we all studied at school. At the time, I didn’t realize what I was getting into, but I was beyond determined. I googled keywords like “CSS 3D cube” to confirm my thoughts and answered Eugene that it was possible.Įugene’s next question was whether I would accept this project? It is worth noting that I like tricky tasks so I couldn’t refuse. I had already had some experience of working with CSS 3D, and a solution started to appear in my mind. It was a 3D object (a cuboid, to be precise), which rotated around one of the axes. He sent me a video and explained that he was developing a concept for a new project and was wondering if it were possible to develop something like the thing on the video. It was an ordinary day when Eugene (manager from CreativePeople) wrote to me. This article by Anna Selezneva was originally published in Smashing Magazine.