CSS3 transform属性详解

作者: 九歌1 | 来源:发表于2017-12-18 14:23 被阅读44次

CSS3的新特性；
css3-transform
CSS3属性transform详解
TRANSFORM
sweet笔记_UIView的transform属性
7月第四周
CSS3动画
#CSS3转换（3）：CSS3 Transform与坐标系统
CSS3 transform属性详解
transform变形

Transforrm属性是控制2D或者3D元素的缩放，倾斜，移动，旋转

<html><!DOCTYPE html>
<html>
<head>
<style> 
#div1
{
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>

<script>
function rotate(value)
{
document.getElementById('div1').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.OTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.transform="rotate(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
</script>

</head>
<body>

<p>Rotate the yellow div element:</p>

<div id="div1">HELLO</div>

Rotate: <br>
<input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br>
transform: rotate(<span id="span1">7deg</span>);

</body>
</html>

上面代码复制到html文件你大概会明白transform作用

transform属性详解：

none 不进行任何转换

matrix 进行2D转换，6个值语法transform: matrix(2, 2, 0, 2, 45, 0);

translatr 定义2D转换语法transform: translate(45px, 1em); transform: translate(45px, 45px);

scale 2D缩放语法transform: scale(2, 2);

rotate 2D旋转语法transform: rotate(45deg);

skew 2D倾斜语法transform: skew(45deg, 45deg);

perspective 3D转换语法perspective: 100px;

transform-origin X，Y，Z轴旋转中心点2D（X、Y），3D（X、Y、Z）语法transform-origin: 100% 0% 0px;
none：定义进行转换
matrix(n,n,n,n,n,n)：进行2D转换，需要6个方位值
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义3的转换，需要16个4*4矩阵值
translate(x,y)：定义2D转换
translate3d(x,y)：定义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 转换元素定义透视视图。