Image rotation

Rotate an image by setting the angle parameter (a in URLs) to a given value representing the degree of rotation. A positive value rotates the image clockwise while a negative value rotates it counterclockwise.

Here's and image example uploaded to a Cloudinary demo account:

Ruby:
cl_image_tag("sea_shell.jpg")
PHP:
cl_image_tag("sea_shell.jpg")
Python:
CloudinaryImage("sea_shell.jpg").image()
Node.js:
cloudinary.image("sea_shell.jpg")
Java:
cloudinary.url().imageTag("sea_shell.jpg")
JS:
cl.imageTag('sea_shell.jpg').toHtml();
jQuery:
$.cloudinary.image("sea_shell.jpg")
React:
<Image publicId="sea_shell.jpg" >

</Image>
Angular:
<cl-image public-id="sea_shell.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("sea_shell.jpg")
Original

Here's an example where the angle parameter is set to 90 (a_90 in URLs), which rotates the image 90 degrees clockwise:

Ruby:
cl_image_tag("sea_shell.jpg", :angle=>90)
PHP:
cl_image_tag("sea_shell.jpg", array("angle"=>90))
Python:
CloudinaryImage("sea_shell.jpg").image(angle=90)
Node.js:
cloudinary.image("sea_shell.jpg", {angle: 90})
Java:
cloudinary.url().transformation(new Transformation().angle(90)).imageTag("sea_shell.jpg")
JS:
cl.imageTag('sea_shell.jpg', {angle: 90}).toHtml();
jQuery:
$.cloudinary.image("sea_shell.jpg", {angle: 90})
React:
<Image publicId="sea_shell.jpg" angle="90">
        <Transformation angle=90 />
</Image>
Angular:
<cl-image public-id="sea_shell.jpg" angle="90">
        <cl-transformation angle=90 />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("sea_shell.jpg")
Rotated 90°

An overlay image can also be rotated. Here's an example where we take Cloudinary's logo image, resize it to fixed dimensions, change the opacity to 70% and rotate it 30 degrees counterclockwise:

Ruby:
cl_image_tag("sea_shell.jpg", :overlay=>"cloudinary_icon", :width=>900, :angle=>-30, :opacity=>70)
PHP:
cl_image_tag("sea_shell.jpg", array("overlay"=>"cloudinary_icon", "width"=>900, "angle"=>-30, "opacity"=>70))
Python:
CloudinaryImage("sea_shell.jpg").image(overlay="cloudinary_icon", width=900, angle=-30, opacity=70)
Node.js:
cloudinary.image("sea_shell.jpg", {overlay: "cloudinary_icon", width: 900, angle: -30, opacity: 70})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon").width(900).angle(-30).opacity(70)).imageTag("sea_shell.jpg")
JS:
cl.imageTag('sea_shell.jpg', {overlay: "cloudinary_icon", width: 900, angle: -30, opacity: 70}).toHtml();
jQuery:
$.cloudinary.image("sea_shell.jpg", {overlay: "cloudinary_icon", width: 900, angle: -30, opacity: 70})
React:
<Image publicId="sea_shell.jpg" overlay="cloudinary_icon" width="900" angle="-30" opacity="70">
        <Transformation overlay="cloudinary_icon" width=900 angle=-30 opacity=70 />
</Image>
Angular:
<cl-image public-id="sea_shell.jpg" overlay="cloudinary_icon" width="900" angle="-30" opacity="70">
        <cl-transformation overlay="cloudinary_icon" width=900 angle=-30 opacity=70 />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon").Width(900).Angle(-30).Opacity(70)).BuildImageTag("sea_shell.jpg")
Rotated overlay

by Itay Taragano