{"id":22213,"date":"2020-11-03T01:44:27","date_gmt":"2020-11-03T01:44:27","guid":{"rendered":"http:\/\/rotating_images_in_javascript_three_quick_tutorials"},"modified":"2025-10-20T16:24:04","modified_gmt":"2025-10-20T23:24:04","slug":"rotating_images_in_javascript_three_quick_tutorials","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials","title":{"rendered":"Rotating Images in JavaScript: 3 Quick Tutorials"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>With JavaScript (JS), you can create cool image animations, including JavaScript image rotate and flip, which are difficult to do with <a href=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\">Cascading Style Sheets (CSS)<\/a>. This article describes:<\/p>\n<ul>\n<li>All you need to know to dynamically rotate or flip images with JavaScript.<\/li>\n<li>How Cloudinary helps you automatically rotate and remove image backgrounds.<\/li>\n<\/ul>\n<h2>Dynamic Javascript Image Rotation<\/h2>\n<p>Here are the topics:<\/p>\n<ul>\n<li>\n<a href=\"#rotate\">Dynamically rotating images with JS<\/a>\n<\/li>\n<li>\n<a href=\"#flip\">Flipping images with JS<\/a>\n<\/li>\n<li>\n<a href=\"#dynamic\">Dynamically rotating images with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"#cloudinary\">Learning more about Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"#css\">Checking out the details of CSS image transformations<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"rotate\">Dynamically Rotating Images With JS<\/h2>\n<p>To rotate images with JS, edit the CSS <code>transform<\/code> property. See the procedure below.<\/p>\n<h3>Rotating Images With a Click<\/h3>\n<p>First, define the <code>image<\/code> element in your HTML source and create a clickable element, which can be a button or the image itself. For example:<\/p>\n<p><strong>HTML<\/strong><\/p>\n<p><code>&lt;img class=&quot;rotate&quot; src=&quot;image.jpg&quot;\/&gt;<\/code><\/p>\n<p><strong>JS file or <code>&lt;script&gt;<\/code> element<\/strong><\/p>\n<p>Next, define a rotational variable to maintain the image rotation, enabling multiple rotations, as here:<\/p>\n<p><code>const current_rotation = 0;<\/code><\/p>\n<p>Finally, add an event listener to the image (see the code below). In the listener function, incrementing the rotation with positive numbers rotates the image in a clockwise direction; doing that with negative numbers results in a counterclockwise rotation.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>document.querySelector(&quot;.rotate&quot;).addEventListener('click', function(){\n\tcurrent_rotation += 90;\ndocument.querySelector(&quot;.rotate&quot;).style.transform = 'rotate(' + current_rotation + 'deg)';\n});\n<\/code><\/pre>\n<h3>Customizing Rotations<\/h3>\n<p>When applying rotations, you can add CSS properties to animate rotations or set up rotations around a specific point of the image.<\/p>\n<p><strong>Animations<\/strong><\/p>\n<p>To animate rotations, apply the CSS <code>transition<\/code> property to specify which other property is transitioned and when. For example, the following code causes the rotation to occur in half a second with a slow start.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>.rotate {\n\ttransition: transform 0.5s ease-in;\n}\n<\/code><\/pre>\n<p><strong>Rotation point<\/strong><\/p>\n<p>By default, the image rotates around its center point. To have the image rotate around another point, specify that point with the <code>transform-origin<\/code> property in CSS.<\/p>\n<p>If manually defined, the center point is at 50% 50%. You can alter the x and y values for 2D images, and the z value for 3D images. For example:<\/p>\n<p>To set the origin in the upper-right corner:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>.rotate {\n\ttransform-origin: 100% 0%;\n}\n<\/code><\/pre>\n<p>To set the origin in the upper-left corner:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>.rotate {\n\ttransform-origin: 0% 0%;\n}\n<\/code><\/pre>\n<p>For more cool tricks, see our articles on resizing with <a href=\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\">JavaScript<\/a> and with <a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\">CSS<\/a>.<\/p>\n<h2 id=\"flip\">Javascript Image Flip Animation<\/h2>\n<p>Flipping or mirroring images is a common task. Displaying mirrored images with \u2018transform: scaleX(-1\u2019)in CSS is just an effect, not a permanent change. To persistently flip an image for static use, create a canvas in JS to transform and output the image after flipping.<\/p>\n<p>The code examples below are adapted from a tutorial by Rik Schennink on LinkedIn.<\/p>\n<p><strong>HTML<\/strong><\/p>\n<p>First, define the <code>image<\/code> element:<\/p>\n<p><code>&lt;img src=&quot;image.jpg&quot; class=&quot;image-flip&quot;\/&gt;<\/code><\/p>\n<p><strong>JS file or <code>&lt;script&gt;<\/code> element<\/strong><\/p>\n<p>Next, create a reference to your image for transformations with a canvas:<\/p>\n<p><code>const inputImage = document.querySelector('.image-flip');<\/code><\/p>\n<p>Add logic to ensure that the flipping occurs at the right time. The code below first checks if image loading is complete and, if so, the flip function runs. Otherwise, the function waits till loading is done before flipping the image.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>if (inputImage.complete) {\n  flipImage();\n}\nelse {\n  inputImage.onload = flipImage;\n}\n<\/code><\/pre>\n<p>Now create a function that flips the image\u2014in effect, create a canvas, set it to the same size as the image, and define your drawing context. You can then flip the image with <code>ctx.scale()<\/code>, draw the image on the canvas with <code>ctx.drawImage<\/code>, and display the output image with <code>insertBefore()<\/code> on the appropriate Document Object Model (DOM) element. Here\u2019s the code:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>function flipImage() {\n    \n  const outputImage = document.createElement(&quot;canvas&quot;);\n  outputImage.width = inputImage.naturalWidth;\n  outputImage.height = inputImage.naturalHeight;\n    \n  const ctx = outputImage.getContext(&quot;2d&quot;);\n\n  \/\/ Flip the image by scaling negatively to the left\n  ctx.scale(-1, 1);\n\n  \/\/ Draw the image on the canvas\n  \/\/ Starts at [-width, 0] because the flip scaled negatively\n  ctx.drawImage(inputImage, -outputImage.width, 0);\n    \n  \/\/ Display the output image after the input image in your client\ninputImage.parentNode.insertBefore(outputImage, inputImage.nextElementSibling);\n}\n<\/code><\/pre>\n<p>For details on transforming images with CSS, see this article on <a href=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\">CSS image effects<\/a>.<\/p>\n<h2 id=\"dynamic\">Dynamically Rotating Images With Cloudinary<\/h2>\n<p>A cloud-based service for managing images and videos, Cloudinary offers a generous <a href=\"https:\/\/cloudinary.com\/pricing\">free-forever subscription plan<\/a>. While on that platform, you can upload your images, apply built-in effects, filters, and modifications, including automated image rotations that are difficult or impossible to produce with CSS and JS.<\/p>\n<p>Also with Cloudinary, you can easily transform images programmatically with <a href=\"https:\/\/cloudinary.com\/documentation\">SDKs<\/a> or URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly as your site design evolves and as you support more devices and screen sizes\u2014a huge convenience and time saver.<\/p>\n<p>Below are two ways in which to rotate images with Cloudinary.<\/p>\n<h3>Automatically Flip Videos<\/h3>\n<p>To <a href=\"https:\/\/cloudinary.com\/cookbook\/automatically_flip_videos\">automatically rotate and flip videos<\/a>, set the angle parameter (\u2018a_\u2019) with a numerical value. To mirror videos, set the \u2018vflip\u2019 (for vertical flips) or <code>hflip<\/code> (for horizontal flips) parameter. Here\u2019s an example of a video mirrored vertically:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video(\\&quot;dog\\&quot;, {transformation: [ {angle: \\&quot;vflip\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video(\\&quot;dog\\&quot;, {transformation: [\\n  {angle: \\&quot;vflip\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Video publicId=\\&quot;dog\\&quot; &gt; &lt;Transformation angle=\\&quot;vflip\\&quot; \\\/&gt; &lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Video publicId=\\&quot;dog\\&quot; &gt;\\n\\t&lt;Transformation angle=\\&quot;vflip\\&quot; \\\/&gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-video public-id=\\&quot;dog\\&quot; &gt; &lt;cld-transformation angle=\\&quot;vflip\\&quot; \\\/&gt; &lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-video public-id=\\&quot;dog\\&quot; &gt;\\n\\t&lt;cld-transformation angle=\\&quot;vflip\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-video public-id=\\&quot;dog\\&quot; &gt; &lt;cl-transformation angle=\\&quot;vflip\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-video public-id=\\&quot;dog\\&quot; &gt;\\n\\t&lt;cl-transformation angle=\\&quot;vflip\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.videoTag(&#039;dog&#039;, {transformation: [ {angle: \\&quot;vflip\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.videoTag(&#039;dog&#039;, {transformation: [\\n  {angle: \\&quot;vflip\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryVideo(\\&quot;dog\\&quot;).video(transformation=[ {&#039;angle&#039;: \\&quot;vflip\\&quot;}, {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryVideo(\\&quot;dog\\&quot;).video(transformation=[\\n  {&#039;angle&#039;: \\&quot;vflip\\&quot;},\\n  {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new VideoTag(&#039;dog.mp4&#039;))\\n\\t-&gt;rotate(Rotate::mode(\\n\\tRotationMode::verticalFlip()))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500));&quot;,&quot;codeSnippet&quot;:&quot;(new VideoTag(&#039;dog.mp4&#039;))\\n\\t-&gt;rotate(Rotate::mode(\\n\\tRotationMode::verticalFlip()))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_video_tag(\\&quot;dog\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;angle\\&quot;=&gt;\\&quot;vflip\\&quot;), array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_video_tag(\\&quot;dog\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;angle\\&quot;=&gt;\\&quot;vflip\\&quot;),\\n  array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().angle(\\&quot;vflip\\&quot;).chain() .width(500).crop(\\&quot;scale\\&quot;)).videoTag(\\&quot;dog\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .angle(\\&quot;vflip\\&quot;).chain()\\n  .width(500).crop(\\&quot;scale\\&quot;)).videoTag(\\&quot;dog\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_video_tag(\\&quot;dog\\&quot;, transformation: [ {angle: \\&quot;vflip\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_video_tag(\\&quot;dog\\&quot;, transformation: [\\n  {angle: \\&quot;vflip\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(\\&quot;vflip\\&quot;).Chain() .Width(500).Crop(\\&quot;scale\\&quot;)).BuildVideoTag(\\&quot;dog\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlVideoUp.Transform(new Transformation()\\n  .Angle(\\&quot;vflip\\&quot;).Chain()\\n  .Width(500).Crop(\\&quot;scale\\&quot;)).BuildVideoTag(\\&quot;dog\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video(&#039;dog.mp4&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.mode(\\n\\tRotationMode.verticalFlip()))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video(&#039;dog.mp4&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.mode(\\n\\tRotationMode.verticalFlip()))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.createUrl().setResourceType(\\&quot;video\\&quot;).setTransformation(CLDTransformation().setAngle(\\&quot;vflip\\&quot;).chain() .setWidth(500).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;dog.mp4\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.createUrl().setResourceType(\\&quot;video\\&quot;).setTransformation(CLDTransformation()\\n  .setAngle(\\&quot;vflip\\&quot;).chain()\\n  .setWidth(500).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;dog.mp4\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().angle(\\&quot;vflip\\&quot;).chain() .width(500).crop(\\&quot;scale\\&quot;)).resourceType(\\&quot;video\\&quot;).generate(\\&quot;dog.mp4\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .angle(\\&quot;vflip\\&quot;).chain()\\n  .width(500).crop(\\&quot;scale\\&quot;)).resourceType(\\&quot;video\\&quot;).generate(\\&quot;dog.mp4\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video(&#039;dog.mp4&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.mode(\\n\\tRotationMode.verticalFlip()))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video(&#039;dog.mp4&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.mode(\\n\\tRotationMode.verticalFlip()))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video {\\n\\tpublicId(\\&quot;dog.mp4\\&quot;)\\n\\t rotate(Rotate.mode(\\n\\tRotationMode.verticalFlip()))\\n\\t resize(Resize.scale() { width(500) }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video {\\n\\tpublicId(\\&quot;dog.mp4\\&quot;)\\n\\t rotate(Rotate.mode(\\n\\tRotationMode.verticalFlip()))\\n\\t resize(Resize.scale() { width(500) }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.video(\\&quot;dog\\&quot;, {transformation: [ {angle: \\&quot;vflip\\&quot;}, {width: 500, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.video(\\&quot;dog\\&quot;, {transformation: [\\n  {angle: \\&quot;vflip\\&quot;},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;)\\n  .rotate(mode(verticalFlip()))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/video\\\/upload\\\/a_vflip\\\/w_500\\\/dog.mp4&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;video&quot;,&quot;transformation&quot;:[{&quot;angle&quot;:&quot;vflip&quot;},{&quot;width&quot;:&quot;500&quot;}],&quot;transformation_string&quot;:&quot;a_vflip\\\/w_500&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;dog.mp4&quot;,&quot;extension&quot;:&quot;mp4&quot;,&quot;format&quot;:&quot;mp4&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;video&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><video\n      controls\n      muted\n      preload=\"none\"\n      class=\"c-transformed-asset c-transformed-asset--video\"\n      poster=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_vflip\/w_500\/dog.jpg\"\n      \n    >\n      <source src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_vflip\/w_500\/vc_h265\/dog.mp4\" type=\"video\/mp4; codecs=hevc\">\n<source src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_vflip\/w_500\/vc_vp9\/dog.webm\" type=\"video\/webm; codecs=vp9\">\n<source src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_vflip\/w_500\/vc_auto\/dog.mp4\" type=\"video\/mp4\">\n<source src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_vflip\/w_500\/vc_auto\/dog.webm\" type=\"video\/webm\">\n    <\/video><\/p>\n<p><code>cloudinary.videoTag('dog', {angle: \u201cvflip\u201d, width: 500}).toHtml();<\/code><\/p>\n<p>If the angle skews the display with bounding boxes around the video, select the color of the boxes and display a blurred version of the video in that space. See this example of a video with white bounding boxes.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video(\\&quot;dog\\&quot;, {transformation: [ {angle: 45}, {width: 500, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video(\\&quot;dog\\&quot;, {transformation: [\\n  {angle: 45},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Video publicId=\\&quot;dog\\&quot; &gt; &lt;Transformation angle=\\&quot;45\\&quot; \\\/&gt; &lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Video publicId=\\&quot;dog\\&quot; &gt;\\n\\t&lt;Transformation angle=\\&quot;45\\&quot; \\\/&gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-video public-id=\\&quot;dog\\&quot; &gt; &lt;cld-transformation angle=\\&quot;45\\&quot; \\\/&gt; &lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-video public-id=\\&quot;dog\\&quot; &gt;\\n\\t&lt;cld-transformation angle=\\&quot;45\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-video public-id=\\&quot;dog\\&quot; &gt; &lt;cl-transformation angle=\\&quot;45\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-video public-id=\\&quot;dog\\&quot; &gt;\\n\\t&lt;cl-transformation angle=\\&quot;45\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.videoTag(&#039;dog&#039;, {transformation: [ {angle: 45}, {width: 500, crop: \\&quot;scale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.videoTag(&#039;dog&#039;, {transformation: [\\n  {angle: 45},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryVideo(\\&quot;dog\\&quot;).video(transformation=[ {&#039;angle&#039;: 45}, {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryVideo(\\&quot;dog\\&quot;).video(transformation=[\\n  {&#039;angle&#039;: 45},\\n  {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new VideoTag(&#039;dog.mp4&#039;))\\n\\t-&gt;rotate(Rotate::byAngle(45))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500));&quot;,&quot;codeSnippet&quot;:&quot;(new VideoTag(&#039;dog.mp4&#039;))\\n\\t-&gt;rotate(Rotate::byAngle(45))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_video_tag(\\&quot;dog\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;angle\\&quot;=&gt;45), array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_video_tag(\\&quot;dog\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;angle\\&quot;=&gt;45),\\n  array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().angle(45).chain() .width(500).crop(\\&quot;scale\\&quot;)).videoTag(\\&quot;dog\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .angle(45).chain()\\n  .width(500).crop(\\&quot;scale\\&quot;)).videoTag(\\&quot;dog\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_video_tag(\\&quot;dog\\&quot;, transformation: [ {angle: 45}, {width: 500, crop: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_video_tag(\\&quot;dog\\&quot;, transformation: [\\n  {angle: 45},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(45).Chain() .Width(500).Crop(\\&quot;scale\\&quot;)).BuildVideoTag(\\&quot;dog\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlVideoUp.Transform(new Transformation()\\n  .Angle(45).Chain()\\n  .Width(500).Crop(\\&quot;scale\\&quot;)).BuildVideoTag(\\&quot;dog\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video(&#039;dog.mp4&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(45))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video(&#039;dog.mp4&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(45))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.createUrl().setResourceType(\\&quot;video\\&quot;).setTransformation(CLDTransformation().setAngle(45).chain() .setWidth(500).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;dog.mp4\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.createUrl().setResourceType(\\&quot;video\\&quot;).setTransformation(CLDTransformation()\\n  .setAngle(45).chain()\\n  .setWidth(500).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;dog.mp4\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().angle(45).chain() .width(500).crop(\\&quot;scale\\&quot;)).resourceType(\\&quot;video\\&quot;).generate(\\&quot;dog.mp4\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .angle(45).chain()\\n  .width(500).crop(\\&quot;scale\\&quot;)).resourceType(\\&quot;video\\&quot;).generate(\\&quot;dog.mp4\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video(&#039;dog.mp4&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(45))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video(&#039;dog.mp4&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(45))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video {\\n\\tpublicId(\\&quot;dog.mp4\\&quot;)\\n\\t rotate(Rotate.byAngle(45))\\n\\t resize(Resize.scale() { width(500) }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video {\\n\\tpublicId(\\&quot;dog.mp4\\&quot;)\\n\\t rotate(Rotate.byAngle(45))\\n\\t resize(Resize.scale() { width(500) }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.video(\\&quot;dog\\&quot;, {transformation: [ {angle: 45}, {width: 500, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.video(\\&quot;dog\\&quot;, {transformation: [\\n  {angle: 45},\\n  {width: 500, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.mp4\\&quot;).rotate(byAngle(45)).resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/video\\\/upload\\\/a_45\\\/w_500\\\/dog.mp4&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;video&quot;,&quot;transformation&quot;:[{&quot;angle&quot;:&quot;45&quot;},{&quot;width&quot;:&quot;500&quot;}],&quot;transformation_string&quot;:&quot;a_45\\\/w_500&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;dog.mp4&quot;,&quot;extension&quot;:&quot;mp4&quot;,&quot;format&quot;:&quot;mp4&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;video&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><video\n      controls\n      muted\n      preload=\"none\"\n      class=\"c-transformed-asset c-transformed-asset--video\"\n      poster=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_45\/w_500\/dog.jpg\"\n      \n    >\n      <source src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_45\/w_500\/vc_h265\/dog.mp4\" type=\"video\/mp4; codecs=hevc\">\n<source src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_45\/w_500\/vc_vp9\/dog.webm\" type=\"video\/webm; codecs=vp9\">\n<source src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_45\/w_500\/vc_auto\/dog.mp4\" type=\"video\/mp4\">\n<source src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/a_45\/w_500\/vc_auto\/dog.webm\" type=\"video\/webm\">\n    <\/video><\/p>\n<p><code>cloudinary.videoTag('dog', {angle: 20, width: 500}).toHtml();<\/code><\/p>\n<h3>Automatically Rotate Images and Remove Backgrounds<\/h3>\n<p>By leveraging Cloudinary\u2019s machine-learning features, you can <a href=\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary\">remove image backgrounds and rotate<\/a> the image itself. That\u2019s a neat way for creating product mockups or customizing images.<\/p>\n<p>To remove the background, use Cloudinary\u2019s AI Removal Background add-on with which you can upload images with Ruby, PHP, Python, Java, .NET, or Node.js, and assign output URLs. Below is an example in Node.js:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>cloudinary.v2.uploader.upload(&quot;baseball.jpg&quot;, \n  { public_id: &quot;baseball_no_bg&quot;,\n    background_removal: &quot;cloudinary_ai&quot;,\n    notification_url: &quot;https:\/\/mysite.example.com\/hooks&quot; }),\n  function(error, result){console.log(result);});\n<\/code><\/pre>\n<center>\n<table width=\"70%\" cellspacing=\"10\" >\n  <tr align=\"center\">\n   <td style=\"padding:0 8px 0 10px;\">\n        <strong>These:<\/strong><p\/>\n   <\/td>\n   <td style=\"padding:0 8px 0 10px;\">\n         <strong>Become These!<\/strong><p\/>\n   <\/td>\n  <\/tr>\n  <tr align=\"center\">\n   <td style=\"padding:0 8px 0 8px;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/rmv_bgd\/baseball_orig.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_250,h_167,c_fill,g_south,f_auto,q_auto\/docs\/rmv_bgd\/baseball_orig.jpg\"  title=\"Baseball player - original\" alt=\"Baseball player - original\"><\/a><p\/>\n   <\/td>\n   <\/td>\n   <td style=\"padding:0 8px 0 8px;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/rmv_bgd\/baseball.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_250,f_auto,q_auto\/u_docs:transparent_grid,w_250,h_167,c_crop,g_south\/docs\/rmv_bgd\/baseball.png\"  title=\"baseball player - no background\" alt=\"baseball player - no background\"><\/a><p\/>\n   <\/td>\n  <\/tr>\n<\/table>\n<\/center>\n<p>Afterwards, you can flip or rotate the backgroundless image as you desire. The example below rotates it by 60 degrees clockwise.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, {angle: 60})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, {angle: 60})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt; &lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt;\\n\\t&lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt; &lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt;\\n\\t&lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt; &lt;cl-transformation angle=\\&quot;60\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt;\\n\\t&lt;cl-transformation angle=\\&quot;60\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;, {angle: 60}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;, {angle: 60}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).image(angle=60)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).image(angle=60)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, array(\\&quot;angle\\&quot;=&gt;60))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, array(\\&quot;angle\\&quot;=&gt;60))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().angle(60)).imageTag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().angle(60)).imageTag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, angle: 60)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, angle: 60)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(60)).BuildImageTag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(60)).BuildImageTag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(60)).generate(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(60)).generate(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().angle(60)).generate(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().angle(60)).generate(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, {angle: 60})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, {angle: 60})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/a_60\\\/docs\\\/rmv_bgd\\\/baseball.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;angle&quot;:&quot;60&quot;}],&quot;transformation_string&quot;:&quot;a_60&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/rmv_bgd\\\/baseball.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/a_60\/docs\/rmv_bgd\/baseball.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/a_60\/docs\/rmv_bgd\/baseball.png\" alt=\"Image showing baseball player under 60 degrees of rotate animation with Cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2069\" height=\"2303\"\/><\/a><\/p>\n<pre class=\"js-syntax-highlighted\"><code>cloudinary.imageTag('baseball.png', {transformation: [\n  {width: 500 },\n  {angle: 60 }\n  ]}).toHtml();\n<\/code><\/pre>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, {width: 500, angle: 60, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, {width: 500, angle: 60, crop: \\&quot;scale\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt; &lt;Transformation width=\\&quot;500\\&quot; angle=\\&quot;60\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; angle=\\&quot;60\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt; &lt;cld-transformation width=\\&quot;500\\&quot; angle=\\&quot;60\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; angle=\\&quot;60\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt; &lt;cl-transformation width=\\&quot;500\\&quot; angle=\\&quot;60\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; angle=\\&quot;60\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;, {width: 500, angle: 60, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;, {width: 500, angle: 60, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).image(width=500, angle=60, crop=\\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;).image(width=500, angle=60, crop=\\&quot;scale\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;))\\n\\t-&gt;rotate(Rotate::byAngle(60))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;))\\n\\t-&gt;rotate(Rotate::byAngle(60))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, array(\\&quot;width\\&quot;=&gt;500, \\&quot;angle\\&quot;=&gt;60, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, array(\\&quot;width\\&quot;=&gt;500, \\&quot;angle\\&quot;=&gt;60, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(500).angle(60).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(500).angle(60).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, width: 500, angle: 60, crop: \\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, width: 500, angle: 60, crop: \\&quot;scale\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Angle(60).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Angle(60).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setAngle(60).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setAngle(60).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(500).angle(60).crop(\\&quot;scale\\&quot;)).generate(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(500).angle(60).crop(\\&quot;scale\\&quot;)).generate(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/rmv_bgd\\\/baseball.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60))\\n\\t.resize(Resize.scale().width(500)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n\\t rotate(Rotate.byAngle(60))\\n\\t resize(Resize.scale() { width(500) }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n\\t rotate(Rotate.byAngle(60))\\n\\t resize(Resize.scale() { width(500) }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, {width: 500, angle: 60, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;, {width: 500, angle: 60, crop: \\&quot;scale\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/rmv_bgd\\\/baseball.png\\&quot;)\\n  .rotate(byAngle(60))\\n  .resize(scale().width(500));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_500,a_60\\\/docs\\\/rmv_bgd\\\/baseball.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;500&quot;,&quot;angle&quot;:&quot;60&quot;}],&quot;transformation_string&quot;:&quot;w_500,a_60&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/rmv_bgd\\\/baseball.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500,a_60\/docs\/rmv_bgd\/baseball.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500,a_60\/docs\/rmv_bgd\/baseball.png\" alt=\"Image showing baseball player resized with Cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"557\"\/><\/a><\/p>\n<h2 id=\"cloudinary\">Learning More About Cloudinary<\/h2> \nBesides image rotations, Cloudinary offers a multitude of robust tools for web developers, including the following:\n<ul>\n<li>\n<strong>Automated image uploads.<\/strong> You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.<\/li>\n<li>\n<strong>Generous image storage.<\/strong> Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.<\/li>\n<li>\n<strong>Seamless asset management.<\/strong> You can efficiently manage your image library on Cloudinary by performing tasks like searching, organizing, and tagging files; controlling access; and monitoring usage and performance.<\/li>\n<li>\n<strong>Effective image transformations.<\/strong> You can transform, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.<\/li>\n<li>\n<strong>Automated image optimization.<\/strong> Cloudinary automatically selects the optimal quality and encoding settings for images, adapts the settings to any resolution or pixel density, and scales or crops images to focus on the important regions.<\/li>\n<li>\n<strong>Responsive images.<\/strong> Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.<\/li>\n<li>\n<strong>Reliable and fast image delivery.<\/strong> Cloudinary delivers images through Content Delivery Networks (CDNs)\u2014Akamai, Fastly, and CloudFront\u2014with no integration or management on your part.<\/li>\n<\/ul>\n<p>Do give Cloudinary a try. To start, <a href=\"https:\/\/cloudinary.com\/pricing\">sign up<\/a> for a free account.<\/p>\n<h2 id=\"css\">Checking Out the Details of CSS Image Transformations<\/h2> \n<p>Want to learn more about CSS image transformations? These articles are an excellent resource:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\">Working With CSS Images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\">CSS Image Overlay: Overlaying Text and Images for Visual Effect<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\">Image Resizing: Manually With CSS and Automatically With Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\">CSS Image Effects: Five Simple Examples and a Quick Animation Guide<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/creating_image_filter_effects_with_css_and_riveting_transformations\">Creating Image-Filter Effects With CSS and Riveting Transformations<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\">Rotating Images in JavaScript: Three Quick Tutorials<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\">Cool Tricks for Resizing Images in JavaScript<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22214,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,177,227,303,305],"class_list":["post-22213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-javascript","tag-performance-optimization","tag-video","tag-video-api"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Rotate Images in JavaScript: 3 Quick Tutorials<\/title>\n<meta name=\"description\" content=\"Learn how to easily do JavaScript image rotation and JavaScript image flip animation flip images in JavaScript, plus how to automatically do that with Cloudinary for free.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rotating Images in JavaScript: 3 Quick Tutorials\" \/>\n<meta property=\"og:description\" content=\"Learn how to easily do JavaScript image rotation and JavaScript image flip animation flip images in JavaScript, plus how to automatically do that with Cloudinary for free.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-03T01:44:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-20T23:24:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Rotating Images in JavaScript: 3 Quick Tutorials\",\"datePublished\":\"2020-11-03T01:44:27+00:00\",\"dateModified\":\"2025-10-20T23:24:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"Javascript\",\"Performance Optimization\",\"Video\",\"Video API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\",\"url\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\",\"name\":\"How to Rotate Images in JavaScript: 3 Quick Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA\",\"datePublished\":\"2020-11-03T01:44:27+00:00\",\"dateModified\":\"2025-10-20T23:24:04+00:00\",\"description\":\"Learn how to easily do JavaScript image rotation and JavaScript image flip animation flip images in JavaScript, plus how to automatically do that with Cloudinary for free.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA\",\"width\":1540,\"height\":847,\"caption\":\"Image showing graphic representation of JS rotate animation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rotating Images in JavaScript: 3 Quick Tutorials\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Rotate Images in JavaScript: 3 Quick Tutorials","description":"Learn how to easily do JavaScript image rotation and JavaScript image flip animation flip images in JavaScript, plus how to automatically do that with Cloudinary for free.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials","og_locale":"en_US","og_type":"article","og_title":"Rotating Images in JavaScript: 3 Quick Tutorials","og_description":"Learn how to easily do JavaScript image rotation and JavaScript image flip animation flip images in JavaScript, plus how to automatically do that with Cloudinary for free.","og_url":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials","og_site_name":"Cloudinary Blog","article_published_time":"2020-11-03T01:44:27+00:00","article_modified_time":"2025-10-20T23:24:04+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials"},"author":{"name":"","@id":""},"headline":"Rotating Images in JavaScript: 3 Quick Tutorials","datePublished":"2020-11-03T01:44:27+00:00","dateModified":"2025-10-20T23:24:04+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA","keywords":["Asset Management","Javascript","Performance Optimization","Video","Video API"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials","url":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials","name":"How to Rotate Images in JavaScript: 3 Quick Tutorials","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA","datePublished":"2020-11-03T01:44:27+00:00","dateModified":"2025-10-20T23:24:04+00:00","description":"Learn how to easily do JavaScript image rotation and JavaScript image flip animation flip images in JavaScript, plus how to automatically do that with Cloudinary for free.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA","width":1540,"height":847,"caption":"Image showing graphic representation of JS rotate animation"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Rotating Images in JavaScript: 3 Quick Tutorials"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719041\/Web_Assets\/blog\/rotate_js_2221468493\/rotate_js_2221468493.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22213"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22213\/revisions"}],"predecessor-version":[{"id":38921,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22213\/revisions\/38921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22214"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}