JavaScript(JS)可创建酷图像动画,难以实现级联样式表 .文章描述如何
JS动态旋转或翻转图片
自动旋转并删除云形图像背景
题目如下:
JS旋转图片编辑CSS变换
属性见下文程序
第一定义图像显示
HTML源码中元素并创建可点击元素,可以是按钮或图像本身例举 :
html
JS文件或
element
Next, define a rotational variable to maintain the image rotation, enabling multiple rotations, as here:
const current_rotation = 0;
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.
document.querySelector(".rotate").addEventListener('click', function(){
current_rotation += 90;
document.querySelector(".rotate").style.transform = 'rotate(' + current_rotation + 'deg)';
});
Copy link to this heading
When applying rotations, you can add CSS properties to animate rotations or set up rotations around a specific point of the image.
Animations
To animate rotations, apply the CSS transition
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.
.rotate {
transition: transform 0.5s ease-in;
}
Rotation point
By default, the image rotates around its center point. To have the image rotate around another point, specify that point with the transform-origin
property in CSS.
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:
To set the origin in the upper-right corner:
.rotate {
transform-origin: 100% 0%;
}
To set the origin in the upper-left corner:
.rotate {
transform-origin: 0% 0%;
}
For more cool tricks, see our articles on resizing with JavaScript and with CSS .
Copy link to this heading
Flipping or mirroring images is a common task. Displaying mirrored images with ‘transform: scaleX(-1’)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.
The code examples below are adapted from a tutorial by Rik Schennink.
HTML
First, define the image
element:
JS file or
element
Next, create a reference to your image for transformations with a canvas:
const inputImage = document.querySelector('.image-flip');
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.
if (inputImage.complete) {
flipImage();
}
else {
inputImage.onload = flipImage;
}
Now create a function that flips the image—in 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 ctx.scale()
, draw the image on the canvas with ctx.drawImage
, and display the output image with insertBefore()
on the appropriate Document Object Model (DOM) element. Here’s the code:
function flipImage() {
const outputImage = document.createElement("canvas");
outputImage.width = inputImage.naturalWidth;
outputImage.height = inputImage.naturalHeight;
const ctx = outputImage.getContext("2d");
// Flip the image by scaling negatively to the left
ctx.scale(-1, 1);
// Draw the image on the canvas
// Starts at [-width, 0] because the flip scaled negatively
ctx.drawImage(inputImage, -outputImage.width, 0);
// Display the output image after the input image in your client
inputImage.parentNode.insertBefore(outputImage, inputImage.nextElementSibling);
}
For details on transforming images with CSS, see this article on CSS image effects .
Copy link to this heading
A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan . 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.
Also with Cloudinary, you can easily transform images programmatically with SDKs 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—a huge convenience and time saver.
Below are two ways in which to rotate images with Cloudinary.
Copy link to this heading
To automatically rotate and flip videos , set the angle parameter (‘a_’) with a numerical value. To mirror videos, set the ‘vflip’ (for vertical flips) or hflip
(for horizontal flips) parameter. Here’s an example of a video mirrored vertically:
<\/Video>","codeSnippet":"\n\t \n\t \n<\/Video>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryVideo(\"dog.mp4\")\n .rotate(mode(verticalFlip()))\n .resize(scale().width(500));","codeSnippet":"new CloudinaryVideo(\"dog.mp4\")\n .rotate(mode(verticalFlip()))\n .resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-video>","codeSnippet":"\n\t \n\t \n<\/cld-video>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryVideo(\"dog.mp4\")\n .rotate(mode(verticalFlip()))\n .resize(scale().width(500));","codeSnippet":"new CloudinaryVideo(\"dog.mp4\")\n .rotate(mode(verticalFlip()))\n .resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-transformation> <\/cl-video>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n\t\n\t<\/cl-transformation>\n<\/cl-video>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryVideo(\"dog.mp4\")\n .rotate(mode(verticalFlip()))\n .resize(scale().width(500));","codeSnippet":"new CloudinaryVideo(\"dog.mp4\")\n .rotate(mode(verticalFlip()))\n .resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.videoTag('dog', {transformation: [ {angle: \"vflip\"}, {width: 500, crop: \"scale\"} ]}).toHtml();","codeSnippet":"cloudinary.videoTag('dog', {transformation: [\n {angle: \"vflip\"},\n {width: 500, crop: \"scale\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryVideo(\"dog\").video(transformation=[ {'angle': \"vflip\"}, {'width': 500, 'crop': \"scale\"} ])","codeSnippet":"CloudinaryVideo(\"dog\").video(transformation=[\n {'angle': \"vflip\"},\n {'width': 500, 'crop': \"scale\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new VideoTag('dog.mp4'))\n\t->rotate(Rotate::mode(\n\tRotationMode::verticalFlip()))\n\t->resize(Resize::scale()->width(500));","codeSnippet":"(new VideoTag('dog.mp4'))\n\t->rotate(Rotate::mode(\n\tRotationMode::verticalFlip()))\n\t->resize(Resize::scale()->width(500));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_video_tag(\"dog\", array(\"transformation\"=>array( array(\"angle\"=>\"vflip\"), array(\"width\"=>500, \"crop\"=>\"scale\") )))","codeSnippet":"cl_video_tag(\"dog\", array(\"transformation\"=>array(\n array(\"angle\"=>\"vflip\"),\n array(\"width\"=>500, \"crop\"=>\"scale\")\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().angle(\"vflip\").chain() .width(500).crop(\"scale\")).videoTag(\"dog\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .angle(\"vflip\").chain()\n .width(500).crop(\"scale\")).videoTag(\"dog\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_video_tag(\"dog\", :transformation=>[ {:angle=>\"vflip\"}, {:width=>500, :crop=>\"scale\"} ])","codeSnippet":"cl_video_tag(\"dog\", :transformation=>[\n {:angle=>\"vflip\"},\n {:width=>500, :crop=>\"scale\"}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(\"vflip\").Chain() .Width(500).Crop(\"scale\")).BuildVideoTag(\"dog\")","codeSnippet":"cloudinary.Api.UrlVideoUp.Transform(new Transformation()\n .Angle(\"vflip\").Chain()\n .Width(500).Crop(\"scale\")).BuildVideoTag(\"dog\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.video('dog.mp4').transformation(Transformation()\n\t.rotate(Rotate.mode(\n\tRotationMode.verticalFlip()))\n\t.resize(Resize.scale().width(500)));","codeSnippet":"cloudinary.video('dog.mp4').transformation(Transformation()\n\t.rotate(Rotate.mode(\n\tRotationMode.verticalFlip()))\n\t.resize(Resize.scale().width(500)));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"cloudinary.createUrl().setResourceType(\"video\").setTransformation(CLDTransformation().setAngle(\"vflip\").chain() .setWidth(500).setCrop(\"scale\")).generate(\"dog.mp4\")","codeSnippet":"cloudinary.createUrl().setResourceType(\"video\").setTransformation(CLDTransformation()\n .setAngle(\"vflip\").chain()\n .setWidth(500).setCrop(\"scale\")).generate(\"dog.mp4\")","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().angle(\"vflip\").chain() .width(500).crop(\"scale\")).resourceType(\"video\").generate(\"dog.mp4\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .angle(\"vflip\").chain()\n .width(500).crop(\"scale\")).resourceType(\"video\").generate(\"dog.mp4\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.video('dog.mp4').transformation(Transformation()\n\t.rotate(Rotate.mode(\n\tRotationMode.verticalFlip()))\n\t.resize(Resize.scale().width(500)));","codeSnippet":"cloudinary.video('dog.mp4').transformation(Transformation()\n\t.rotate(Rotate.mode(\n\tRotationMode.verticalFlip()))\n\t.resize(Resize.scale().width(500)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.video {\n\tpublicId(\"dog.mp4\")\n\t rotate(Rotate.mode(\n\tRotationMode.verticalFlip()))\n\t resize(Resize.scale() { width(500) }) \n}.generate()","codeSnippet":"cloudinary.video {\n\tpublicId(\"dog.mp4\")\n\t rotate(Rotate.mode(\n\tRotationMode.verticalFlip()))\n\t resize(Resize.scale() { width(500) }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.video(\"dog\", {transformation: [ {angle: \"vflip\"}, {width: 500, crop: \"scale\"} ]})","codeSnippet":"$.cloudinary.video(\"dog\", {transformation: [\n {angle: \"vflip\"},\n {width: 500, crop: \"scale\"}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryVideo(\"dog.mp4\")\n .rotate(mode(verticalFlip()))\n .resize(scale().width(500));","codeSnippet":"new CloudinaryVideo(\"dog.mp4\")\n .rotate(mode(verticalFlip()))\n .resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/video\/upload\/a_vflip\/w_500\/dog.mp4","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"video","transformation":[{"angle":"vflip"},{"width":"500"}],"transformation_string":"a_vflip\/w_500","url_suffix":"","version":"","secure":true,"public_id":"dog.mp4","extension":"mp4","format":"mp4","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"video"}"
with-url="true"
>
Loading code examples
cloudinary.videoTag('dog', {angle: “vflip”, width: 500}).toHtml();
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.
<\/Video>","codeSnippet":"\n\t \n\t \n<\/Video>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryVideo(\"dog.mp4\").rotate(byAngle(45)).resize(scale().width(500));","codeSnippet":"new CloudinaryVideo(\"dog.mp4\").rotate(byAngle(45)).resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-video>","codeSnippet":"\n\t \n\t \n<\/cld-video>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryVideo(\"dog.mp4\").rotate(byAngle(45)).resize(scale().width(500));","codeSnippet":"new CloudinaryVideo(\"dog.mp4\").rotate(byAngle(45)).resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-transformation> <\/cl-video>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n\t\n\t<\/cl-transformation>\n<\/cl-video>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryVideo(\"dog.mp4\").rotate(byAngle(45)).resize(scale().width(500));","codeSnippet":"new CloudinaryVideo(\"dog.mp4\").rotate(byAngle(45)).resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.videoTag('dog', {transformation: [ {angle: 45}, {width: 500, crop: \"scale\"} ]}).toHtml();","codeSnippet":"cloudinary.videoTag('dog', {transformation: [\n {angle: 45},\n {width: 500, crop: \"scale\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryVideo(\"dog\").video(transformation=[ {'angle': 45}, {'width': 500, 'crop': \"scale\"} ])","codeSnippet":"CloudinaryVideo(\"dog\").video(transformation=[\n {'angle': 45},\n {'width': 500, 'crop': \"scale\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new VideoTag('dog.mp4'))\n\t->rotate(Rotate::byAngle(45))\n\t->resize(Resize::scale()->width(500));","codeSnippet":"(new VideoTag('dog.mp4'))\n\t->rotate(Rotate::byAngle(45))\n\t->resize(Resize::scale()->width(500));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_video_tag(\"dog\", array(\"transformation\"=>array( array(\"angle\"=>45), array(\"width\"=>500, \"crop\"=>\"scale\") )))","codeSnippet":"cl_video_tag(\"dog\", array(\"transformation\"=>array(\n array(\"angle\"=>45),\n array(\"width\"=>500, \"crop\"=>\"scale\")\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().angle(45).chain() .width(500).crop(\"scale\")).videoTag(\"dog\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .angle(45).chain()\n .width(500).crop(\"scale\")).videoTag(\"dog\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_video_tag(\"dog\", :transformation=>[ {:angle=>45}, {:width=>500, :crop=>\"scale\"} ])","codeSnippet":"cl_video_tag(\"dog\", :transformation=>[\n {:angle=>45},\n {:width=>500, :crop=>\"scale\"}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(45).Chain() .Width(500).Crop(\"scale\")).BuildVideoTag(\"dog\")","codeSnippet":"cloudinary.Api.UrlVideoUp.Transform(new Transformation()\n .Angle(45).Chain()\n .Width(500).Crop(\"scale\")).BuildVideoTag(\"dog\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.video('dog.mp4').transformation(Transformation()\n\t.rotate(Rotate.byAngle(45))\n\t.resize(Resize.scale().width(500)));","codeSnippet":"cloudinary.video('dog.mp4').transformation(Transformation()\n\t.rotate(Rotate.byAngle(45))\n\t.resize(Resize.scale().width(500)));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"cloudinary.createUrl().setResourceType(\"video\").setTransformation(CLDTransformation().setAngle(45).chain() .setWidth(500).setCrop(\"scale\")).generate(\"dog.mp4\")","codeSnippet":"cloudinary.createUrl().setResourceType(\"video\").setTransformation(CLDTransformation()\n .setAngle(45).chain()\n .setWidth(500).setCrop(\"scale\")).generate(\"dog.mp4\")","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().angle(45).chain() .width(500).crop(\"scale\")).resourceType(\"video\").generate(\"dog.mp4\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .angle(45).chain()\n .width(500).crop(\"scale\")).resourceType(\"video\").generate(\"dog.mp4\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.video('dog.mp4').transformation(Transformation()\n\t.rotate(Rotate.byAngle(45))\n\t.resize(Resize.scale().width(500)));","codeSnippet":"cloudinary.video('dog.mp4').transformation(Transformation()\n\t.rotate(Rotate.byAngle(45))\n\t.resize(Resize.scale().width(500)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.video {\n\tpublicId(\"dog.mp4\")\n\t rotate(Rotate.byAngle(45))\n\t resize(Resize.scale() { width(500) }) \n}.generate()","codeSnippet":"cloudinary.video {\n\tpublicId(\"dog.mp4\")\n\t rotate(Rotate.byAngle(45))\n\t resize(Resize.scale() { width(500) }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.video(\"dog\", {transformation: [ {angle: 45}, {width: 500, crop: \"scale\"} ]})","codeSnippet":"$.cloudinary.video(\"dog\", {transformation: [\n {angle: 45},\n {width: 500, crop: \"scale\"}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryVideo(\"dog.mp4\").rotate(byAngle(45)).resize(scale().width(500));","codeSnippet":"new CloudinaryVideo(\"dog.mp4\").rotate(byAngle(45)).resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/video\/upload\/a_45\/w_500\/dog.mp4","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"video","transformation":[{"angle":"45"},{"width":"500"}],"transformation_string":"a_45\/w_500","url_suffix":"","version":"","secure":true,"public_id":"dog.mp4","extension":"mp4","format":"mp4","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"video"}"
with-url="true"
>
Loading code examples
cloudinary.videoTag('dog', {angle: 20, width: 500}).toHtml();
Copy link to this heading
By leveraging Cloudinary’s machine-learning features, you can remove image backgrounds and rotate the image itself. That’s a neat way for creating product mockups or customizing images.
To remove the background, use Cloudinary’s 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:
cloudinary.v2.uploader.upload("baseball.jpg",
{ public_id: "baseball_no_bg",
background_removal: "cloudinary_ai",
notification_url: "https://mysite.example.com/hooks" }),
function(error, result){console.log(result);});
These:
Become These!
Afterwards, you can flip or rotate the backgroundless image as you desire. The example below rotates it by 60 degrees clockwise.
<\/Image>","codeSnippet":"\n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").rotate(byAngle(60));","codeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").rotate(byAngle(60));","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":"\n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").rotate(byAngle(60));","codeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").rotate(byAngle(60));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").rotate(byAngle(60));","codeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").rotate(byAngle(60));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('docs\/rmv_bgd\/baseball.png', {angle: 60}).toHtml();","codeSnippet":"cloudinary.imageTag('docs\/rmv_bgd\/baseball.png', {angle: 60}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").image(angle=60)","codeSnippet":"CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").image(angle=60)","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('docs\/rmv_bgd\/baseball.png'))\n\t->rotate(Rotate::byAngle(60));","codeSnippet":"(new ImageTag('docs\/rmv_bgd\/baseball.png'))\n\t->rotate(Rotate::byAngle(60));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"docs\/rmv_bgd\/baseball.png\", array(\"angle\"=>60))","codeSnippet":"cl_image_tag(\"docs\/rmv_bgd\/baseball.png\", array(\"angle\"=>60))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().angle(60)).imageTag(\"docs\/rmv_bgd\/baseball.png\");","codeSnippet":"cloudinary.url().transformation(new Transformation().angle(60)).imageTag(\"docs\/rmv_bgd\/baseball.png\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"docs\/rmv_bgd\/baseball.png\", :angle=>60)","codeSnippet":"cl_image_tag(\"docs\/rmv_bgd\/baseball.png\", :angle=>60)","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(60)).BuildImageTag(\"docs\/rmv_bgd\/baseball.png\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(60)).BuildImageTag(\"docs\/rmv_bgd\/baseball.png\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('docs\/rmv_bgd\/baseball.png').transformation(Transformation()\n\t.rotate(Rotate.byAngle(60)));","codeSnippet":"cloudinary.image('docs\/rmv_bgd\/baseball.png').transformation(Transformation()\n\t.rotate(Rotate.byAngle(60)));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(60)).generate(\"docs\/rmv_bgd\/baseball.png\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(60)).generate(\"docs\/rmv_bgd\/baseball.png\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().angle(60)).generate(\"docs\/rmv_bgd\/baseball.png\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().angle(60)).generate(\"docs\/rmv_bgd\/baseball.png\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('docs\/rmv_bgd\/baseball.png').transformation(Transformation()\n\t.rotate(Rotate.byAngle(60)));","codeSnippet":"cloudinary.image('docs\/rmv_bgd\/baseball.png').transformation(Transformation()\n\t.rotate(Rotate.byAngle(60)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/rmv_bgd\/baseball.png\")\n\t rotate(Rotate.byAngle(60)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/rmv_bgd\/baseball.png\")\n\t rotate(Rotate.byAngle(60)) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"docs\/rmv_bgd\/baseball.png\", {angle: 60})","codeSnippet":"$.cloudinary.image(\"docs\/rmv_bgd\/baseball.png\", {angle: 60})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").rotate(byAngle(60));","codeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").rotate(byAngle(60));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/a_60\/docs\/rmv_bgd\/baseball.png","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"angle":"60"}],"transformation_string":"a_60","url_suffix":"","version":null,"secure":true,"public_id":"docs\/rmv_bgd\/baseball.png","extension":"png","format":"png","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}"
with-url="true"
>
Loading code examples
cloudinary.imageTag('baseball.png', {transformation: [
{width: 500 },
{angle: 60 }
]}).toHtml();
<\/Image>","codeSnippet":"\n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\")\n .rotate(byAngle(60))\n .resize(scale().width(500));","codeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\")\n .rotate(byAngle(60))\n .resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":"\n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\")\n .rotate(byAngle(60))\n .resize(scale().width(500));","codeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\")\n .rotate(byAngle(60))\n .resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":"\n\t\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\")\n .rotate(byAngle(60))\n .resize(scale().width(500));","codeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\")\n .rotate(byAngle(60))\n .resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('docs\/rmv_bgd\/baseball.png', {width: 500, angle: 60, crop: \"scale\"}).toHtml();","codeSnippet":"cloudinary.imageTag('docs\/rmv_bgd\/baseball.png', {width: 500, angle: 60, crop: \"scale\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").image(width=500, angle=60, crop=\"scale\")","codeSnippet":"CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\").image(width=500, angle=60, crop=\"scale\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('docs\/rmv_bgd\/baseball.png'))\n\t->rotate(Rotate::byAngle(60))\n\t->resize(Resize::scale()->width(500));","codeSnippet":"(new ImageTag('docs\/rmv_bgd\/baseball.png'))\n\t->rotate(Rotate::byAngle(60))\n\t->resize(Resize::scale()->width(500));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"docs\/rmv_bgd\/baseball.png\", array(\"width\"=>500, \"angle\"=>60, \"crop\"=>\"scale\"))","codeSnippet":"cl_image_tag(\"docs\/rmv_bgd\/baseball.png\", array(\"width\"=>500, \"angle\"=>60, \"crop\"=>\"scale\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(500).angle(60).crop(\"scale\")).imageTag(\"docs\/rmv_bgd\/baseball.png\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(500).angle(60).crop(\"scale\")).imageTag(\"docs\/rmv_bgd\/baseball.png\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"docs\/rmv_bgd\/baseball.png\", :width=>500, :angle=>60, :crop=>\"scale\")","codeSnippet":"cl_image_tag(\"docs\/rmv_bgd\/baseball.png\", :width=>500, :angle=>60, :crop=>\"scale\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Angle(60).Crop(\"scale\")).BuildImageTag(\"docs\/rmv_bgd\/baseball.png\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Angle(60).Crop(\"scale\")).BuildImageTag(\"docs\/rmv_bgd\/baseball.png\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('docs\/rmv_bgd\/baseball.png').transformation(Transformation()\n\t.rotate(Rotate.byAngle(60))\n\t.resize(Resize.scale().width(500)));","codeSnippet":"cloudinary.image('docs\/rmv_bgd\/baseball.png').transformation(Transformation()\n\t.rotate(Rotate.byAngle(60))\n\t.resize(Resize.scale().width(500)));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setAngle(60).setCrop(\"scale\")).generate(\"docs\/rmv_bgd\/baseball.png\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setAngle(60).setCrop(\"scale\")).generate(\"docs\/rmv_bgd\/baseball.png\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(500).angle(60).crop(\"scale\")).generate(\"docs\/rmv_bgd\/baseball.png\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(500).angle(60).crop(\"scale\")).generate(\"docs\/rmv_bgd\/baseball.png\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('docs\/rmv_bgd\/baseball.png').transformation(Transformation()\n\t.rotate(Rotate.byAngle(60))\n\t.resize(Resize.scale().width(500)));","codeSnippet":"cloudinary.image('docs\/rmv_bgd\/baseball.png').transformation(Transformation()\n\t.rotate(Rotate.byAngle(60))\n\t.resize(Resize.scale().width(500)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/rmv_bgd\/baseball.png\")\n\t rotate(Rotate.byAngle(60))\n\t resize(Resize.scale() { width(500) }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/rmv_bgd\/baseball.png\")\n\t rotate(Rotate.byAngle(60))\n\t resize(Resize.scale() { width(500) }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"docs\/rmv_bgd\/baseball.png\", {width: 500, angle: 60, crop: \"scale\"})","codeSnippet":"$.cloudinary.image(\"docs\/rmv_bgd\/baseball.png\", {width: 500, angle: 60, crop: \"scale\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\")\n .rotate(byAngle(60))\n .resize(scale().width(500));","codeSnippet":"new CloudinaryImage(\"docs\/rmv_bgd\/baseball.png\")\n .rotate(byAngle(60))\n .resize(scale().width(500));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]"
parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_500,a_60\/docs\/rmv_bgd\/baseball.png","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"500","angle":"60"}],"transformation_string":"w_500,a_60","url_suffix":"","version":null,"secure":true,"public_id":"docs\/rmv_bgd\/baseball.png","extension":"png","format":"png","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}"
with-url="true"
>
Loading code examples
Copy link to this heading
Besides image rotations, Cloudinary offers a multitude of robust tools for web developers, including the following:
Automated image uploads. You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.
Generous image storage. Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.
Seamless asset management. 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.
Effective image transformations. You can transform, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.
Automated image optimization. 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.
Responsive images. Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.
Reliable and fast image delivery. Cloudinary delivers images through Content Delivery Networks (CDNs)—Akamai, Fastly, and CloudFront—with no integration or management on your part.
Do give Cloudinary a try. To start, sign up for a free account.
Copy link to this heading
Want to learn more about CSS image transformations? These articles are an excellent resource: