放大：transfrom:scale(x,y)
旋转：transfrom:rotate(180deg)旋转180度
原点设置一次即可，不需要多次设置，只要在转180度以后，再次旋转180度（也就是从180度转到360度）即可，继续累加就继续转（可以超过360度）。比如：
<style>div {
position:absolute;
left:200px;
top:200px;
transform-origin:-30px center;
transition:all 1s
}
</style>
<button>旋转180度</button>
<div>文字A</div>
<script>
var jd=0;
windowonload=function(){
documentquerySelector("button")onclick=function(){
jd+=180;
documentquerySelector("div")styletransform="rotate("+jd+"deg)";
}
}
</script>
代码如下：
<!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=">
90°旋转后的
<img src=">
</body>
</html>
代码呈现的结果如下图：
扩展资料
CSS旋转注意事项
1、的旋转可以说是一种效果，但是逐渐的，旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。我们都知道，照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。
2、这个 *** 作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的发布到web上。但是，现在直接就可以在web上对进行旋转之类的处理，就算处理软件再怎么方便好用，也不及直接发布时对做调整来的方便。这就是旋转功能的实用意义。我们可以在新浪微博上见到这种旋转的功能。
问问题要有逻辑，要描述清楚需求，语言无法表达的就配图，不然别人根本不知道你要的什么。首先：轴向有3个：x、y、z，都可以理解为某一方向的中心，你要围绕那根转呢？
然后：多张的合集在空间上有一个共有的全局x、y、z轴
接着：每张又有自己局部的x、y、z轴
你是要全局轴上转还是局部轴上转或者全局和局部轴都转呢？
如果你要都转的话，就像地球自转公转一样，那你自转时方向跟公转统一还是反向或是随机呢？
每张自转速度要统一还是要随机呢，随机速度值有个参考范围么？
问题描述不清楚，就包含了很多可能性，你如果问：
很多张围一个圆圈，围绕圆心旋转，那这个问题大方向就只有两个可能了：
形式1：“ ⊙ ” 外圈是路径，中点是圆心
形式2： ”中 ” 口字是，中间竖线是圆心 ( 2即把形式1视角方向旋转90度以后的视角 )/ css3 让一个不断翻转示例代码 /
#gavinPlay{
/ background:color url x y repeat 来自百度，按需要更换 /
background:red url(">}<!-- html 布局代码 -->
<div id="gavinPlay"></div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）