css3 transform变形属性笔记

原创 国哥笔记  2018-02-16 20:33  阅读 2,064 views 次

transform属性定义及用法

在css中,tansform属性是用来对元素的进行2D或者3D转换(旋转、缩放、移动、倾斜等)。

相关属性

  • transform-origin属性:更改转换元素的位置;
  • transform-style属性:指定嵌套元素是怎样在三维空间中呈现;

浏览器支持

Internet Explorer 10、Firefox、Opera浏览器支持transform属性;Internet Explorer 9浏览器支持替代的-ms-transform属性(仅适用于 2D 转换)、Safari 和 Chrome浏览器支持替代的 -webkit-transform 属性(3D 和 2D 转换);Opera 只支持 2D 转换。

属性值

  • none:不进行转换(默认);
  • matrix(n,n,n,n,n,n):使用六个值的矩阵定义2D转换;
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n):使用16个值的4x4矩阵定义3D转换;
  • translate(x,y):2D 转换;
  • translate3d(x,y,z):3D 转换;
  • translateX(x):用 X 轴的值定义转换;
  • translateY(y):用 Y 轴的值定义转换;
  • translateZ(z):用 Z 轴的值定义3D转换;
  • scale(x[,y]?):2D缩放转换;
  • scale3d(x,y,z):3D缩放转换;
  • scaleX(x):设置 X 轴的值来定义缩放转换;
  • scaleY(y):设置 Y 轴的值来定义缩放转换;
  • scaleZ(z):设置 Z 轴的值来定义 3D 缩放转换;
  • rotate(angle):规定角度定义 2D 旋转;
  • rotate3d(x,y,z,angle):定义 3D 旋转;
  • rotateX(angle) :沿着 X 轴的 3D 旋转;
  • rotateY(angle) :沿着 Y 轴的 3D 旋转;
  • rotateZ(angle) :沿着 Z 轴的 3D 旋转;
  • skew(x-angle,y-angle):沿着 X 和 Y 轴的 2D 倾斜转换;
  • skewX(angle):沿着 X 轴的 2D 倾斜转换;
  • skewY(angle):沿着 Y 轴的 2D 倾斜转换;
  • perspective(n) :为 3D 转换元素定义透视视图;

语法格式:

transform: 以上属性值;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 transform变形属性笔记</title>
<style type="text/css">
div{width:200px;height:20px;border:1px solid red;background:#987;}
#tf1{margin-top:80px;transform:rotate(10deg);}
#tf2{transform:rotate(30deg);}
#tf3{transform:rotate(90deg);}
</style>
<head/>
<body>
<div id="tf1">rotate(10deg)</div>
<div id="tf2">rotate(30deg)</div>
<div id="tf3">rotate(90deg)</div>
</body>
</html>
</html>

运行结果:

css3 transform变形属性笔记

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css_transform.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情