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

CSS3 rotate3d(x,y,z,angle)

2018-7-27 22:06| 作者: admin| 查看: 3858| 评论: 0|来自: 蚂蚁部落

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

rotate3d()方法用来规定指定元素在三维空间中的旋转。

二维空间的旋转可以参阅CSS3 rotate()一章节。

语法结构:

[CSS] 纯文本查看 复制代码
rotate3d(x,y,z,angle)

参数解析:

(1).x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值。

(2).y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值。

(3).z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值。

(4).angle:一个角度值,指定在3D空间旋转角度,正值顺时针旋转,反之元素逆时。

关于前三个矢量值的使用需要一定的数学知识,计算方式可以参阅MDN rotate3d()一文。

如果对数学不够精通,可以分别设置在不同轴的旋转角度。

代码实例如下:

[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;     
  perspective:1200px; 
}  
#inner{  
  padding:50px;  
  position:absolute;  
  border:1px solid black;  
  background-color:yellow;  
  font-size:12px;  
 
  transform-origin:0px 0px;
  transform:rotateX(40deg) rotateY(20deg) rotateZ(10deg);
}   
</style>   
</head>  
     
<body>  
<div id="box">  
  <div id="inner">蚂蚁部落</div>  
</div>  
</body>  
</html>

上面代码分别在x、y和z轴分别设置旋转40deg、20deg和10deg,用到了三个拆分方法:

[CSS] 纯文本查看 复制代码
rotateX(40deg) 
rotateY(20deg) 
rotateZ(10deg)

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部