Rotating images with css

transform

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Try it

If the property has a value different than none , a stacking context will be created. In that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.

Warning: Only transformable elements can be transform ed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

Syntax

/* Keyword values */ transform: none; /* Function values */ transform: matrix(1, 2, 3, 4, 5, 6); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Global values */ transform: inherit; transform: initial; transform: revert; transform: revert-layer; transform: unset; 

The transform property may be specified as either the keyword value none or as one or more values.

If perspective() is one of multiple function values, it must be listed first.

Values

One or more of the CSS transform functions to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

Specifies that no transform should be applied.

Accessibility concerns

Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide.

Also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

Formal definition

Initial value	none
Applies to	transformable elements
Inherited	no
Percentages	refer to the size of bounding box
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	a transform
Creates stacking context	yes

Источник

rotate()

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a data type.

Try it

The fixed point that the element rotates around — mentioned above — is also known as the transform origin. This defaults to the center of the element, but you can set your own custom transform origin using the transform-origin property.

Syntax

Values

Cartesian coordinates on ℝ^2	Homogeneous coordinates on ℝℙ^2	Cartesian coordinates on ℝ^3	Homogeneous coordinates on ℝℙ^3
( cos ( a ) — sin ( a ) sin ( a ) cos ( a ) )	( cos ( a ) — sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 )	( cos ( a ) — sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 )	( cos ( a ) — sin ( a ) 0 0 sin ( a ) cos ( a ) 0 0 0 0 1 0 0 0 0 1 )
	[cos(a) sin(a) -sin(a) cos(a) 0 0]

Examples

Basic example

HTML

div>Normaldiv> div class="rotated">Rotateddiv> 

CSS

div  width: 80px; height: 80px; background-color: skyblue; > .rotated  transform: rotate(45deg); /* Equal to rotateZ(45deg) */ background-color: pink; > 

Result

Combining rotation with another transformation

If you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. For example, if you rotate before translating, the translation will be along the new axis of rotation!

HTML

div>Normaldiv> div class="rotate">Rotateddiv> div class="rotate-translate">Rotated + Translateddiv> div class="translate-rotate">Translated + Rotateddiv> 

CSS

div  position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; > .rotate  background-color: transparent; outline: 2px dashed; transform: rotate(45deg); > .rotate-translate  background-color: pink; transform: rotate(45deg) translateX(180px); > .translate-rotate  background-color: gold; transform: translateX(180px) rotate(45deg); > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Image rotation with HTML and CSS

Images are crucial for conveying information and enhancing the appearance of your website. You can use them for creating stunning visuals such as product images, banners, illustrations, and more.

Sometimes you might want to rotate or flip images on your page to fit specific visual requirements for your business.

This article will discuss how to rotate and flip images in your HTML using the CSS transform operations.

Later we will look at ImageKit’s real-time image transformations that will help you achieve similar effects across platforms without relying on CSS.

Image rotation and flip operations using CSS and HTML

You can apply CSS functions to an image to create transformations such as rotation, flip, and other effects. We will utilize the following CSS functions and build different effects —

For demonstration, we have picked up the following image by Helena Lopes from Pexels.

This image has been stored in the free integrated media library offered by ImageKit.io.

ImageKit is a complete image and video management and delivery product that helps us optimize image delivery in real-time with no effort. The image stored on ImageKit is accessible here —

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg

You can sign up on ImageKit for free forever and store your images and videos there. You can also deliver optimized content with a CDN directly on your website and apps using ImageKit URLs.

Using the img tag, we can embed this image on our website.

Let’s use different CSS functions to achieve different visual effects on these images.

Image Rotation using rotate() Function

As the name suggests, you can use the rotate(arg) function to rotate an image in a two-dimensional space. The image is rotated based on the argument passed to this function in CSS-supported units, such as degree, gradian, turn, or radian.

The CSS sample below rotates the image by 180 degrees:

The resultant image is shown below —

We can also provide a negative value to rotate the image in a counter-clockwise direction. Here we are trying to rotate an image by 40 degrees in the counter-clockwise direction.

Similarly, you can use other values in the rotate function to rotate the image according to your requirements.

Continuously rotating the image using CSS for an animated effect

We can also use CSS’s animation and keyframes properties to create an animation without using any Javascript or other third-party library.

Let’s look at a simple animation where we will rotate an image continuously and set the image to complete one rotation in 6 seconds. The keyframes definition defines the rotation, whereas the animation property defines the animation’s timing and repetition.

 img < width: 300px; animation: rotation 6s infinite linear; >@keyframes rotation < from < transform: rotate(0deg); >to < transform: rotate(360deg); >>

The resulting animation looks like this —

Similarly, passing a value of -1 to the scaleY function will flip the image vertically.

Dynamic Image Rotation using ImageKit

In the above examples, we rotated the image using CSS properties. CSS is restricted to use in web browsers only.

Therefore, if we have to rotate an image on any other platform, send it out in an email that doesn’t support advanced CSS functions, or do not rely on CSS in general, then we need an alternative way to rotate the image.

ImageKit is a real-time transformation, optimization, and storage service that allows you to manipulate images and videos in real-time using an easy-to-use URL-transformation API.

Rotating images in real-time with the rotate parameter

Using ImageKit’s transformations is simple. You just need to specify the transformation in the specified format in the URL.

To rotate the image, ImageKit provides the rt parameter. To rotate the image by 180 degrees, we need to add rt-180 transformation parameter to the URL, as shown below.

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-180

The resulting image is the same as passing 180deg to the rotate function in CSS.

We can then use this URL directly in our HTML, our apps, or an email without having to worry about whether the end device supports CSS or not.

We can also pass a negative value to the rt parameter to rotate the image in a counter-clockwise direction.

To rotate the image by 40 degrees in the counter-clockwise direction, we need to add rt-N40 parameter to the URL. The resulting image is the same as that obtained by passing a negative value to the rotate function in CSS.

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-N40

We can also resize the image in real-time using the same URL-based image transformation API. To resize the image to 500px width while rotating it, we need to add w-500 to the above URL.

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-N40,w-500

Our resulting image is rotated by 40 degrees and is resized to 500px width.

Note: Resizing with ImageKit is different than resizing using the width property in CSS. With ImageKit’s resizing, the image downloaded over the network is already resized and is hence smaller in size. With CSS-based resizing, the full resolution image is downloaded on the user’s device resulting in unnecessary bandwidth consumption and then resized on the user’s device.

Conclusion

Image rotation can come in handy when the original image needs to be modified to create the right visual effects on your website or app.

You can use CSS transformation functions to achieve this with minimal effort. But this makes the image rotation specific to web and mobile web platforms that support the required CSS.

ImageKit is a real-time image transformation, optimization, and management product that allows us to manipulate images in real-time using a URL-based API. It provides the rt parameter to rotate the image and more than 50 other URL-based parameters to manipulate images and videos on websites and apps in real-time.

It also offers ample media storage and optimized delivery bandwidth for free every month. You can get started with ImageKit by signing up for a free account and taking advantage of its real-time optimizations and transformations to deliver media on your website.

Источник

How to rotate an image with CSS and HTML

Rotating an image on a web page is possible using a CSS (cascading style sheets) rotate class, which is added to any tag to rotate the image.

Rotating an image using CSS

The CSS code needs to include transformations code for each major Internet browser, so the image is rotated in all browsers.

Below is an example of CSS code to rotate an image 180-degrees.

The CSS code above should be added to a .css stylesheet file linked in your HTML (hypertext markup language). For example, if your CSS file is named site.css and in the same directory as your HTML file, you can include the following HTML in the element:

Alternatively, you can include the CSS code inline, either in a style tag appearing before the image tag, or in the style attribute of the image tag.

Once the CSS code is applied to your .css file, stylesheet, or tags, you can use the CSS class name in any of your image tags.

 Tip

To rotate an image by another measure of degrees, change the «180» in the CSS code and tag to the degree you desire.

Rotated image example

Below is an example of our logo using the CSS code above. If your browser supports the CSS rotation, the logo should appear to be rotated 180 degrees.

Related information

Источник