Css旋转90度,旋转角度css
我想问个问题，怎么用CSS定义每张图片旋转90°输出？
写了一个小例子：
Css Code:
.rotate{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
background:#ddd;
height:200px;
width:200px;
}
这里需要注意的是：
1. rotate(angle) ：其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
2. IE的图形旋转滤镜，它可以有4个旋转值：0, 1, 2,和3。
Xhtml Code:
div class="rotate"
img src="" alt="" /这里是你想要变形的任何的元素。
/div
看一下效果吧，本例div中的图片以及文字都顺时针旋转了90度。
css代码如何把背景图旋转
这个要用css3，ie要用滤镜，举例顺时针旋转90度
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
上面代码前三行是css3，第四行是ie滤镜的简单的90度的整数倍旋转方式，更加复杂的度数要用矩阵，需要的话可以查查资料
注：左旋把90改为-90，rotation=1改为rotation=3.
注：如果你的层上还有文字什么的，也会被旋转，所以有文字的话，和背景图放在不同的层上，旋转有背景图的层
HTML/CSS中如何将一个文字右转90度
html
????style
????????.divdiv{
????????????margin:?10px;
????????????font-size:?50px;
????????????display:?inline-block;
????????}
????????input[type=button]{
????????????margin:?10px;
????????????font-size:?20px;
????????????cursor:?pointer;
????????}
????/style
????body?style="text-align:?center;"
????????div?class="div"
????????????div字/div
????????????div体/div
????????????div旋/div
????????????div转/div
????????/div
????????div
????????????input?type="button"?value="左旋转"?onclick="doLeftTransform()"/
????????????input?type="button"?value="右旋转"?onclick="doRightTransform()"/
????????/div
????/body
????script?type="text/javascript"
????????var?deg?=?0;
????????function?doLeftTransform()
????????{
????????????deg?-=?90;
????????????if(deg?==?-360)?deg?=?0;
????????????var?span?=?document.querySelectorAll(".divdiv");
????????????span.forEach(function(one){
????????????????one.style.transform?=?"rotate("+deg+"deg)";?
????????????});
????????}
????????function?doRightTransform()
????????{
????????????deg?+=?90;
????????????if(deg?==?360)?deg?=?0;
????????????var?span?=?document.querySelectorAll(".divdiv");
????????????span.forEach(function(one){
????????????????one.style.transform?=?"rotate("+deg+"deg)";?
????????????});
????????}
????/script
/html
有问题追问。。。
css网页中图片旋转90度 并适应div
代码如下：
!DOCTYPE html
html
head
titleCSS3旋转图片/title
style
demo {
width: 100px;
height: 75px;
background-color: yellow;
border: 1px solid black;
margin:20px;
}
#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 */
}
/style
/head
body
div class="demo" id="div1"你好。这是一个 div 元素。/div
div style="clear:both"/div
div class="demo" id="div2"你好。这是一个 div 元素。/div
div style="clear:both"/div
div class="demo" id="div3"你好。这是一个 div 元素。/div
原图img src="" alt="Flowers" style="width:200px;"
90°旋转后的图片
img src="" alt="Flowers" style='width:200px;transform:rotate(90deg)'
/body
/html
代码呈现的结果如下图：
扩展资料
CSS图片旋转注意事项
1、图片的旋转可以说是一种效果，但是逐渐的，旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。我们都知道，照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。
2、这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。但是，现在直接就可以在web上对图片进行旋转之类的处理，就算图片处理软件再怎么方便好用，也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。
css rotate（90deg）是旋转了90度还是旋转到90度
是顺时针方向旋转90度，负数则是逆时针方向。
“旋转到90度”这样的说法是不成立的，因为一个物体（或者说元素）本身是不存在角度的，你不能说这个物体在旋转前就是0度吧，因为你是根据什么说它是0度的呢？横边还是竖边啊？既然不能确定，那“旋转到xx度”的说法也就是不存在的，只能说相对于当前的位置旋转了xx度，这样的话不管以哪个边来计算角度都一样了。
css background设置的背景图部分会旋转90°展示的解决办法
最近在做移动端开发的时候，有时候会遇到设置的背景图被莫名其妙的旋转了90°，这是为什么呢？
原因是这个图片携带了exif信息，去掉这个信息就可以了，图片也就恢复正常显示了，在src的路径后面加上参数imageMogr2/auto-orient即可；例如：img src="123.png?imageMogr2/auto-orient"/ ? ;