CSS3 transform 属性

语法：

transform: none|transform-functions;

值	描述
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)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
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 转换元素定义透视视图。

eg：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style>
div
{width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>

转载于:https://www.cnblogs.com/Michelle20180227/p/8658413.html

CSS3 transform 属性相关推荐

css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
html transform属性,css3 transform属性详解
CSS3变形是一些效果的集合,比如平移translate() .旋转rotate().缩放scare()和倾斜skew()效果,每个效果都被称作为变形函数(Transform Function),它们 ...
利用CSS3 transform属性制作漂亮的照片墙特效
CSS3 transform制作漂亮的照片墙特效 >>查看演示 >>下载地址转载于:https://www.cnblogs.com/delmarks/p/css3-zhao- ...
CSS3 transform 属性详解
news多报点 2016-11-18 22:47 写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了 ...
自己做得一个用于直观观察css3 transform属性中的rotate 3D效果
这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html> <html lang="en"> ...
css中translation,css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
html5中skew,css3 skew()属性怎么用？
skew()需要和css3 transform属性一起使用,用于沿着 X 和 Y 轴的 2D 倾斜转换.下面本篇文章给大家介绍一下transform:skew().有一定的参考价值,有需要的朋友可以参 ...
CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
CSS3中的transition和transform属性
一.前言开门见山的说,transition.transform和translate这三者经常有人搞混,先把这三者做一个简单解释: transform是转换,指的是改变所在元素的外观,它有很多种手段 ...
CSS3的景深和transform 属性
一.transform是什么 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.主要是CSS3的内容,在运用之前需要加上transform-st ...

CSS3 transform 属性

CSS3 transform 属性

CSS3 transform 属性相关推荐

最新文章

热门文章