Transform-90
刘耀文的大沙雕
钟意阿满
用![]()
插入图片,结果在网页中图片躺倒了QAQ
<!doctype html>。
<html lang="en">。
<head>
<meta charset="UTF-8">。
<title>Document</title>。
<style>
/*如果使用的不是webkit浏览器 请将代码中的注释都去掉就可以看到效果*/。
@-webkit-keyframes clockwiseRotate{。
to {
transform:rotate(90deg); 。
}
}
@-webkit-keyframes anticlockwiseRotate{。
to {
transform:rotate(-90deg); 。
}
}
@-webkit-keyframes zoomScale{。
to{
transform:scale(1.5);。
}
}
.stage{
width:200px;。
margin:200px auto auto;。
border-left:1px solid;。
border-right:1px solid;。
}
.box{
width:100px;。
height:100px;。
transform-origin:0 0;。
}
.clockwise{
background-color:purple;。
-webkit-animation:clockwiseRotate 2s infinite;。
/* 设置旋转中心为左上角 顺时针旋转90度 */。
/*transform-origin:0 0;。
transform:rotate(90deg);*/。
}
.anticlockwise{。
background-color:orange;。
-webkit-animation:anticlockwiseRotate 2s infinite;。
/* 设置旋转中心为左上角 逆时针旋转90度*/。
/*transform-origin:0 0;。
transform:rotate(-90deg);*/。
}
.zoom{
background-color:green;。
-webkit-animation:zoomScale 2s infinite;。
/* 设置放大中心为元素中心 放大1.5倍*/。
transform-origin:50% 50%;。
/*transform:scale(1.5);*/。
}
</style>。
</head>
<body>
<div class="stage">。
<div class="box clockwise"></div>。
<div class="box anticlockwise"></div>。
<div class="box zoom"></div>。
</div>
</body>
</html>
抱起亚轩找小葵
css网页中图片旋转90度 并适应div
图片旋转一下
Firefox下：
-moz-transform:rotate(-90deg);。
-webkit-transform:rotate(-90deg);。
ie 下：
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);。
这里是ie滤 镜代码部分，前面长长的大小写错综的部分我们不用管它，看后面的”rotation=3″这是关键，
这里的参数可以是0，1，2，3，没有4，
要是是4 啊，5啊之类的，图片就不旋转了。
旋转的角度只要将这些数值乘以90(π/2)就可以了，
所以呢”rotation=3″表示顺时针旋转270度，与 transform:rotate(270deg);是一个意思。
所以，这里，就会有些小小的局限——不能实现任意角度的旋转，只能是90度，180度以 及270度。
但是，IE浏览器不是个简单的罗罗，要实现任意角度的旋转，它还是有办法的，
只是要比上面的麻烦些，难理解些，要用到矩阵变换滤镜。
===============================================。
demo如下：
<style >。
img{
margin:100px auto 0;。
-moz-transform:rotate(-90deg);。
-webkit-transform:rotate(-90deg);。
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 。
}
</style>。
<img src="images/006.gif" alt="" />。
大圣杰锅是
CSS transform中的rotate的旋转中心怎么设置?
代码如下：
<!DOCTYPE html>。
<html>
<head>
<title>CSS3旋转图片</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="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style="width:200px;">。
90°旋转后的图片
<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style='width:200px;transform:rotate(90deg)'>。
</body>
</html>
代码呈现的结果如下图：
扩展资料
CSS图片旋转注意事项
1、图片的旋转可以说是一种效果，但是逐渐的，旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。我们都知道，照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。
2、这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。但是，现在直接就可以在web上对图片进行旋转之类的处理，就算图片处理软件再怎么方便好用，也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。
小韩在追星
HTML中，怎样将图片旋转90度显示
1、默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。
2、没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
3、如果把元素变换原点（transform-origin）设置0（x） 0（y），这个时候元素的变换原点转换到元素的左顶角处。
4、改变transform-origin属性的X轴和Y轴的值就可以重置元素变形原点位置，其基本语法如下所示:。
`transform-origin：[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length> ?`。
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
5、2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Y轴的位置。
6、3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下：
x-offset：用来设置transform-origin水平方向X轴的偏移量，可以使用<length>和<percentage>值，同时也可以是正值（从中心点沿水平方向X轴向右偏移量），也可以是负值（从中心点沿水平方向X轴向左偏移量）。
offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。
y-offset：用来设置transform-origin属性在垂直方向Y轴的偏移量，可以使用<length>和<percentage>值，同时可以是正值（从中心点沿垂直方向Y轴向下的偏移量），也可以是负值（从中心点沿垂直方向Y轴向上的偏移量）。
x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平X轴的偏移量。
y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。
z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0，其取值可以<length>，不过<percentage>在这里将无效。
小韩在追星
jsp中怎样让字旋转90度
1 图片的旋转实现方式有很多，比如js实现，现在比较简单的方法是使用css3里面的；transform属性来实现，很方便的。其实这个题目很简单，在百度里面搜索一下css3旋转就看到了 ，里面的手册介绍的很清楚，下面是代码以及显示效果都呈现出来 ；
2 下面是写的一个实例代码 ，代码可以直接运行 。代码的解释有备注哦 ；总共代码呢其实没有几行，主要就是 transform 属性的应用 代码中的90deg就是90度的意思。
<!DOCTYPE html>。
<html>
<head>
<style>
body{margin:0px;padding:0px;}。
/*{transform就是专门为img图片设置的旋转*/。
#img1{transform:rotate(90deg); border:1px solid red;}。
</style>
</head>
<body>
<img id="img1" src="38.png"/> /*页面中显示的图片*/。
</body>
</html>
3 代码在浏览器的运行效果图 ：