HTML之使用CSS旋转图片

在实际操作中拍的照片有时候不满足需求，需要进行旋转。这个操作可以将图片传到后台进行旋转之后再传至前端显示。但是这样增加了前后端的数据传输，所以想直接再web上对图片进行旋转操作。

1、CSS3 transform

css3 的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。代码如下：

<!DOCTYPE html>
<html>
<head>
<title>CSS旋转图片</title><style>#div2 {transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-moz-transform: rotate(30deg); /* Firefox */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */}#div3 {transform: rotate(90deg);ms-transform: rotate(90deg); /* IE 9 */moz-transform: rotate(90deg); /* Firefox */webkit-transform: rotate(90deg); /* Safari and Chrome */o-transform: rotate(90deg); /* Opera */}#div4{transform: rotate(120deg);ms-transform: rotate(120deg); /* IE 9 */moz-transform: rotate(120deg); /* Firefox */webkit-transform: rotate(120deg); /* Safari and Chrome */o-transform: rotate(120deg); /* Opera */}</style>
</head>
<body><div id="div1">你好,这是一个原始的div元素</div><div id="div2">你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。你好,这是一个 旋转了30°的div 元素。</div><div id="div3">你好。这是一个旋转了90°的 div 元素。你好。这是一个旋转了90°的 div 元素。你好。这是一个旋转了90°的 div 元素。</div><div id="div4">你好。这是一个旋转了120°的 div 元素。你好。这是一个旋转了120°的 div 元素。你好。这是一个旋转了120°的 div 元素。</div>原图<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style="width:20%;height:20%"><br /><br /><br />90°旋转后的图片<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style='width:20%;height:20%;transform:rotate(90deg)'></body>=
</html>

使用transform点击图片旋转

<script>window.onload = function(){var current = 0;document.getElementById('target').onclick = function(){current = (current+90)%360;this.style.transform = 'rotate('+current+'deg)';}};
</script>
......
<img id="target" src="http://www.baidu.com/img/bd_logo1.png">

其他旋转方式有：https://www.itdaan.com/blog/2012/10/13/659ae1844b7d5dbe45161b4c7c4118f6.html

HTML之使用CSS旋转图片相关推荐

css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
css 中图片旋转,倾斜,位移,平滑
在开发中,我们常常需要对图片有一些绚丽的效果,比如是图片旋转,平移,倾斜等.其实这些在css3中都已经存在,整理下作为demo,以后参考使用,也希望供大家交流学习.如果不足,多多指导. <!DO ...
html让图片中心旋转,使用CSS让图片旋转起来
在给程序员的设计学习指南上看到一个图标在不停的旋转,觉得很好玩.于是在好奇心的驱使下,整理出网页中使用.css文件.照葫芦画瓢的弄出大概的效果. 使用CSS实现图片的旋转,有三部分组成:1个HTM ...
CSS 实现图片旋转和水波纹动画效果
CSS 实现图片旋转和水波纹动画效果背景通过 CSS 动画实现图片旋转和水波纹动画效果,并做成 Vue 组件,方便以后复用. 代码 <template><view class=& ...
html中如何使图片自动旋转90度,css实现图片旋转90度的方法
css实现图片旋转90度的方法发布时间:2020-08-31 11:44:39 来源:亿速云阅读:550 作者:小新小编给大家分享一下css实现图片旋转90度的方法,相信大部分人都还不怎么了解, ...
css animation 图片65%角旋转,沿着z轴旋转
用css实现图片斜侧着沿着z轴旋转效果一.原始图一.最终效果图底部图片例子: 一.html代码 <div class="active-box" v-show=" ...
css实现图片的3d旋转
今天的内容是,用css实现图片的3d旋转效果,效果如下: 由于不是视频上传不是很熟悉,所以用图片来简单解释,上述的图片效果,但是图片会绕着一个中心点旋转,像一个圆柱体一样. 下面是具体代码,如果有需要 ...
css如何旋转图片吗,css如何让图片旋转
css让图片旋转的方法:首先创建一个HTML示例文件:然后通过img标签引入图片:最后通过给img图片添加transform和animation样式属性来实现图片旋转效果即可. 本文操作环境:wind ...
360度旋转图片小特效
现在,在这个网络发达的时代,一些电子商务公司,需要将自己线上的产品给买家或用户看,为了能让用户了解的更全面,那么把一个物件的产品要展示到方方面面,就要运用到360度旋转图片特效,因为上次有朋友叫我帮她 ...

HTML之使用CSS旋转图片

HTML之使用CSS旋转图片相关推荐

最新文章

热门文章