您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 rotate()

2018-8-8 13:40| 作者: admin| 查看: 2475| 评论: 0|来自: 蚂蚁部落

关于transform变换更多内容可以参阅CSS3 2D/3D转换一章节。

此方法用来规定指定元素在二维空间中的旋转。

既然是二维空间旋转,所以只能够围绕Z轴进行旋转。

语法结构:

[CSS] 纯文本查看 复制代码
rotate(angle)

参数解析:

angle:规定旋转的角度;如果为负值,那么将会逆时针旋转。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style type="text/css">  
#box{  
  position:relative;  
  height:200px;  
  width:200px;  
  margin-top:150px;  
  margin-left:150px;  
  border:1px solid black;  
}  
#ant{  
  padding:50px;  
  position:absolute;  
  border:1px solid black;  
  background-color:yellow;  
  font-size:12px;  
   
  transform-origin:0px 0px;
  transform:rotate(0deg); 
}  
table{  
  font-size:12px;  
  width:300px;  
  margin-left:120px;  
}  
.left{text-align:right}  
</style>  
<script type="text/javascript">  
function changeRot(value){  
  var ant = document.getElementById('ant');
  var opersp=document.getElementById('persp');  
  ant.style.transform = "rotateZ(" + value + "deg)"; 
  opersp.innerHTML = value + "deg";
} 
window.onload=function(){ 
  var range=document.getElementById("range"); 
  range.onmousemove=function(){ 
    changeRot(this.value); 
  } 
} 
</script>  
</head>  
     
<body>  
<div id="box">  
  <div id="ant">蚂蚁部落</div>  
</div>  
<table>  
  <tr>  
    <td class="left">旋转:</td>  
    <td><input type="range" min="-360" max="360" id="range" value="0"/></td>  
  </tr>  
  <tr>  
    <td class="left">旋转角度:</td>  
    <td>(<span id="persp">0deg</span>)</td>  
  </tr>  
</table>  
</body>  
</html>

上面的代码利用js演示了transform:rotate()方法的功能。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 scale(x,y)下一篇:CSS3 filter属性

最新评论

返回顶部