Menu
homeBreakdowns

Rotate text at a given angle using CSS. Moves and Transformations in CSS3

  • Translation

Hello, dear habrafriend! There are many examples online of great uses of transforms and transitions in CSS3. In this article, we'll go over the basics of CSS3 and learn how to create something like this. This tutorial will be useful for those who have just started getting acquainted with CSS3. Let's get started!

Coordinate system

To make it easier to understand how the movement of an object works, we will work in a coordinate system.


However, our coordinate system has one peculiarity: the Y axis is directed in the opposite direction than usual. Why? The fact is that HTML and CSS (along with, for example, ActionScript) use an inverse coordinate system, since the web page starts from the left top corner and goes down.
The note: We will assume that you are already familiar with HTML structure and CSS. I'll skip the explanations on how to set up CSS file, how to place pictures, etc. We will focus on animating images. If you are not sure what your skills are high level, then we recommend taking a look at the course of lessons “HTML and CSS in 30 days” (free and on English language) to learn everything you need.

1: Horizontal movement

The first movement we will demonstrate is horizontal. We will move objects from left to right and right to left.

Moving to the right

To move an object we will use transform: translate(x,y), where X is a positive number and Y=0.


HTML
Open your favorite code editor and enter the following:


We defined three classes for the picture:

  • object: Establishing the ground rules of our object.
  • van: We will use various objects to demonstrate each type of animation.
  • move-right: Using this class we will move our object.
CSS
First, we will place our object (the truck image) in the center.
.object ( position: absolute; ) .van ( top: 45%; left: 44%; )
In this example, we will move the object 350px to the right. Syntax used transform: translate(350px,0);. In addition, the object will only move when you hover over it: #axis:hover.move-right.

#axis:hover .move-right( transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0) ; /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ )
Parameter transform will just move the object from one point to another, but will not create an animation given movement. To fix this, you need to add a move parameter to class.object.

Object ( position: absolute; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out ; /** Firefox **/ -o-transition: all 2s ease-in-out; /** Opera **/ )
This move rule will tell the browser to animate All object parameters on 2 seconds(without delay) using the function ease-in-out.
We can use 6 different motion timing functions:

  • linear: The movement occurs at a constant speed from start to finish.
  • ease: The movement starts slowly and then picks up speed.
  • ease-in: Movement starts slowly.
  • ease-out: The movement ends slowly.
  • ease-in-out: Movement starts and ends slowly.
  • cubic-bezier: Manually determine the movement value.

Moving left

To move an object to the left, you just need to put a negative value on the axis OH, while Y remains unchanged. In our case, we will move the object to - 350px to the left.

HTML
Create new document html and paste the following code:


This time we are using the class move-left to move the object to the left.

CSS
Now let's enter -350px for the OX axis. transform: translate(-350px,0);- move the object to the left.
#axis:hover .move-left ( transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px ,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ )
Since we already defined the movement rules earlier, we don't need to do it again.

2: Vertical movement

Moving an object vertically will not be difficult, because it is identical to the horizontal one. The only difference is that we will use the value -y to move up and value y to move down.

Moving up


HTML
The HTML template is identical to the previous examples. However, we will replace our object with a rocket (for clarity) and assign a move-up class.

CSS
Just like the truck, we'll place the rocket in the center:
.rocket ( top: 43%; left: 44%; )
As we noted earlier, the Y coordinate must be negative. In our case, we will move the object 350px up.

#axis:hover .move-up ( transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: translate(0,-350px )

Let's move down

As you might have guessed, to move an object down, the Y coordinate must be positive and the X coordinate must be 0. Syntax: translate(0,y);

HTML

CSS
#axis:hover .move-down ( transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); )

3: Diagonal movement

To move an object diagonally, we will combine the parameters x And y. The syntax will be as follows: transform: translate(x,y). Depending on the direction, the value x And y can be either positive or negative.

HTML

CSS
#axis:hover .move-ne ( transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: translate(350px,-350px)

4: Rotation

Rotation in CSS3 is controlled by degree coordinates (from 0° to 360°). To rotate an object, apply the following options: transform: rotate(ndeg); Where n- degrees.

Clockwise rotation

To rotate an object clockwise, apply a positive value for rotate(ndeg).

HTML

CSS
#axis:hover .rotate360cw ( transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); )

Counterclockwise rotation

To rotate an object counterclockwise, apply a negative value for rotate(ndeg).

HTML

CSS
#axis:hover .rotate360ccw ( transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); )

5: Scaling

Scaling is interesting feature CSS3. Using the parameter scale(n) or parameter scale(x,y), we can either increase or decrease the object directly within the HTML. The object will change size depending on the value of n/x,y, where the X axis is the width and the Y axis is the height.
Let's look at the following example.

Property CSS transform(from the word "transformation") allows you to modify an element on HTML pages. For example, you can

  • rotate
  • displace
  • change scale
  • cant
  • combine the above steps

Thanks to this property, you can create interesting effects without the use of JavaScript, which allows you to speed up the browser. It is also important to note that it is possible to combine the effect with time delays.

1. CSS transform syntax

transform : transform1 [transform2 ];

Several actions with an object are allowed simultaneously (for example, rotate, shift and change the scale).

A note about browsers

Not all browsers support transformation. You must use vendor CSS prefixes:

  • -ms-transform - for IE9 and older (below version 9, transformation is not supported
  • -webkit-transform - for Chrome, Safari, Android and iOS
  • -o-transform - for Opera up to version 12.10
  • -moz-transform - for Firefox up to version 16.0

2. transform:rotate(x) - object rotation

To rotate an element there is a command rotate(x) . It allows you to rotate an object x degrees clockwise or counterclockwise. The x value must be specified in degrees deg

Example #1. Rotating an object in html through transformation

height:100px;

background :#444 ;

margin :30px ;

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg );-o-transform : rotate (20deg );

-moz-transform : rotate (20deg );

transform: rotate(20deg);

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

Needed for

correct operation

in older versions of browsers. In the following examples we will also write them. Example #2. Rotating an object in html on hover Let's create a class kvadrat2 and write a pseudo-class :hover for it, in which rotation and changing the color to a lighter one (from #444 to #888) will be specified. .kvadrat2 ( // without rotation width :100px ; height :100px ; background :#444 ; margin :30px ; ) .kvadrat2:hover ( // rotation on hover

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

height:100px;

background :#888 ;

margin :30px ;

-ms-transform : rotate (20deg );

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

-o-transform : rotate (20deg ); -moz-transform : rotate (20deg ); transform: rotate(20deg);

transition: all 1s linear;

-webkit-transition : all 1s linear ;

-o-transition : all 1s linear ;

-moz-transition : all 1s linear ;

)

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

When hovering, the square becomes larger horizontally by 50% (coefficient 1.5), and vertically by 30% (coefficient 1.3). A value of 1 means no scaling. Anything less than 1 will mean the object is getting smaller.

transition: all 1s linear;

If you need to apply a transformation along only one of the axes, then you can use a more special case: scaleX(x) - scaling along X, scaleY(y) - scaling along Y.

5. transform:skew - object tilt

The command for tilting an object is skew(x,y) , where the arguments in parentheses are the slope along the X and Y axes, respectively. The slope must be specified in degrees deg.

Example #6. Skewing objects in html

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

When hovered, the square transforms into a diamond thanks to the tilt.

transition: all 1s linear;

If you need to apply a transformation along only one of the axes, then you can use a more special case: skewX(x) - slope in X, skewY(y) - slope in Y.

6. Combining transform values

It's time to look at the interesting effects that can be achieved by combining different transformations together. Let's apply three actions at once to change the object: scaling (scale), rotation (rotate) and translation (translate).

Example #7. Combining transform values

Initial value: square with black border. When you hover over it, it will rotate into a circle with a red frame and change color.

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

7. Other transform values

We've looked at the most basic transform values. Let's consider other possibilities.

  • none - no transformation (it is enabled by default);
  • matrix(x,x,x,x,x,x) - 2D transformation using a matrix of 6 values;
  • matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x)- 3D transformation using a matrix of 16 values;
  • translate3d(x,y,z) - 3d movement (compared to normal movement, a third coordinate is added here);
  • scale3d(x,y,z) - scaling in 3d (compared to normal scaling, a third coordinate is added here);
  • rotate3d(x,y,z) - rotation in 3d (compared to regular rotation, a third coordinate is added here);
  • rotateX(x) - 3d rotation along the X axis;
  • rotateY(x) - 3d rotation along the Y axis;
  • rotateZ(x) - 3d rotation along the Z axis;
  • perspective(n) - perspective for transforming the 3D element;

In JavaScript CSS property transform is available on the following properties:

object.style.transform="Transformation" document.getElementById("elementID").style.transform = ""

You may be asking the question “why use transform at all when you can simply change the object data as we need. For example, by changing the size of the object?” The difference is that the transform property does not shift other elements on the page during transformation. In case simple change the size of the object, this inevitably leads to a shift of neighboring objects around, which, as a rule, is ugly.

Today we will look at such a wonderful effect available to us thanks to CSS3. It's about about rotating a block or image. He fit amazingly into the site interface and, having mastered this lesson, you will be able to apply this effect and in your projects.

So, we have a set of blocks with some content. We want that when we hover over a block, it will rotate around its axis and show information on the back. I think everyone has played cards at some point and everyone remembers that exciting moment when they had to turn them face up. We will do the same now. Here's our original example:

Let's start writing our CSS. The first thing we have to do, since we are working with 3D transformations, is to set the distance of our object from the viewpoint. And here is the first shitty code:

Flip-container ( -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspective:1000; )

You can specify any other number. Experiment for yourself. For the front (.front) and rear (.back) parts of our playing card must be set absolute positioning so that they “overlap” each other in the final position. We also need to do so back side flipped elements were not displayed during animation. The backface-visibility property will help us with this:

Front, .back ( -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;

Let's set the z-index for the front side (so that it is at the top in the default state) and describe the default rotation angles relative to the vertical axis:

/* front side is placed above the back side */ .front ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg ); transform: rotateY(0deg); z-index: 2; ) /* reverse, initially hidden side */ .back ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg);

When hovering, our cards will rotate, the angles of their sides will change from 0 to 180 degrees and from 180 degrees to 0:

/* the front side is placed above the back side */ .flip-container:hover .front ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); /* reverse, initially hidden side */ .flip-container:hover .back ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY (0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);

We are close to completing our work. All that remains is to let the browser know how child elements must be displayed in 3D space. This property must be used in conjunction with the transform property and is called transform-style . This property should be applied to a block with the class .flipper , and not to .back and .front , otherwise we will be waiting for an unpleasant surprise in the Opera browser.

Flipper ( -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style:preserve-3d; transform-style: preserve-3d)

Hurray, we did it. We just learned how to do rotation using CSS. The best part is that all modern browsers support it. Yes, yes, users in Internet Explorer can also see this beauty starting from version 10. Unfortunately, in Russia there has been a vicious practice of dragging along a string of outdated IE8 and IE9. So my client wanted a tooltip to be shown in older browsers at the moment of hover. Let's see what we can do.

The first thing that comes to mind is to use the @supports directive. We could write:

@supports (transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d) ( /* styles for browsers that support */ /* 3D transforms */ )

Unfortunately, even IE 11 doesn’t know anything about it, so we’ll use the old fashioned way:

In the ie.css file we will describe the styles necessary for our tooltip. I will not present it here, because... it is beyond the scope of this article (and there is nothing interesting there). If you want, you can see it in our example of vertical rotation using CSS. But what if we are interested in horizontal rotation? In this case, our code is transformed like this:

Vertical.flip-container ( position: relative; ) .vertical.flip-container .flipper ( -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : 100% 213.5px; transform-origin: 100% 213.5px; .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform: rotateX(0deg); -moz -transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); .vertical .back, .vertical.flip-container:hover . front, .vertical.flip-container.hover .front ( -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX( 180deg); transform: rotateX(180deg);

rotate function() in CSS performs a two-dimensional rotation transformation on an element around a fixed center. In this case, the block is not deformed and does not affect the position of neighboring HTML containers. The method allows you to specify the rotation angle. In addition, it is possible to set an arbitrary center of rotation.

Block transformation

In CSS, rotate() is a transformation function, so it must be passed to the element's transform property.

Element ( transform: rotate(45deg); )

The first and only argument is the angle by which the object will be rotated. Rotation is carried out in two-dimensional space. For 3D transformations, there are CSS functions rotateX(), rotateY(), rotateZ() and rotate3d().

The space on the page initially occupied by the element remains reserved for it. Visual movement occurs in a new layer without moving adjacent blocks.

Angle of rotation

The angle argument passed to the method must be a CSS type . It consists of numerical value and units of measurement deg (from the English degree - degree).

A positive angle determines the rotation of the object in the direction of movement clockwise, a negative angle - in reverse direction.

Center of rotation

By default, the block is rotated around its geometric center. To change this point you need to use the transform-origin property.

By standard, it takes three parameters that define the coordinates along the X, Y and Z axes. But since rotate() in CSS is a two-dimensional transformation, it will be enough to pass only two values.

Element ( transform: rotate(45deg); transform-origin: 20px 100%; )

The coordinate along each axis can be specified in any valid units of length, percentage of block size, or using keywords top, bottom, left, right. The origin is located in the upper left corner of the rectangular container.

Rotation animation

The transform property lends itself well dynamic change Therefore, CSS allows you to create an animation of the rotation of an element in two-dimensional space.

If you want to rotate an object in response to a specific custom action, for example, hovering the cursor, you can use the CSS transition property, which determines the slow change in the value of other properties.

Element ( transition: transform 2s; ) element:hover ( transform: rotate(180deg); )

TO to the original element no transformations are applied, but when you hover over it, the block will smoothly rotate 180 degrees within two seconds. When the user removes the cursor, the same smooth rotation to the original position will occur.

More in a complicated way animation of an object is to determine the sequence of frame changes for it using properties and the @keyframes rule.

Element ( animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; ) @keyframes rotate ( from ( transform: rotate(0deg); ) to ( transform: rotate (360deg);

A rotate animation is applied to the specified element, causing it to rotate completely from 0 to 360 degrees within two seconds. The animation-iteration-count property sets the animation to repeat indefinitely, and the animation-timing-function sets a smooth transition effect. Combining the in property with rotate transformations allows you to create beautiful dynamic effects.

Translation: Vlad Merzhevich

Scaling, skewing and rotating any element is possible using the CSS3 transform property. It is supported by everyone modern browsers(with prefixes) and allows graceful degradation, for example:

#myelement ( -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); )

Good stuff. However, the entire element rotates - its contents, borders and background picture. What to do if you only want to turn background image? Or should the background remain in place, but the element rotate?

The W3C currently has no proposals for transforming background images. This would be incredibly useful, so I suspect something will appear eventually, but it won't help developers who want to use similar effects today.

Fortunately, there is a solution. Essentially, this is a hack that adds a background image to the :before or :after pseudo-element rather than to the parent container. The pseudo-element can transform independently.

Transforming the background only

The container doesn't have to have any styles, but it does need to set position: relative since our pseudo-element is positioned inside. Also set overflow: hidden , otherwise the background will extend beyond the container.

#myelement ( position: relative; overflow: hidden; )

Now we can create an absolutely positioned pseudo-element with a transformable background. z-index property set as -1, this ensures that the background appears below the contents of the container.

#myelement:before ( content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png ) 0 0 repeat; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); ; )

Note that you may need to adjust the pseudo-element's width, height, and position. For example, if you are using a repeating image, the rotation area should be larger than the container itself to fully accommodate the background.

Fixing the background of transformable elements

Any transformations parent container apply to pseudo-elements as well. So we need to undo the transformation, for example, if the container is rotated 30 degrees, the background should be rotated -30 degrees so that it ends up in a fixed position:

#myelement ( position: relative; overflow: hidden; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg) ; transform: rotate(30deg); ) #myelement:before ( content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: - 1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); transform: rotate(-30deg); transform: rotate(-30deg)

Again, you need to adjust the size and position so that the background fits adequately within the parent container.

Please, for an example. Full code stored inside HTML.

The effect works in IE9, Firefox, Chrome, Safari and Opera. IE8 won't show any transformation, but the background will appear.

IE6 and 7 don't support pseudo-elements, so the background will disappear. However, if you want to support these browsers, you can add a background image to the container and then set it to none using modern selectors or via conditional comments.