介绍
这篇文章主要介绍了如何使用变换属性,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
变换属性用于向元素应用2 d或3 d转换,该属性允许我们对元素进行旋转,缩放,移动或倾斜。
<强>作用:变换属性向元素应用2 d或3 d转换。该属性允许我们对元素进行旋转,缩放,移动或倾斜。
<强>语法:
变换:没有|转换函数; <强>可有属性值说明:
没有:定义不进行转换。
矩阵(n, n, n, n, n, n):定义二维转换,使用六个值的矩阵。
matrix3d (n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n),,定义3 d转换,使用16个值的4 x4矩阵。
翻译(x, y):定义二维转换。
translate3d (x, y, z):定义3 d转换。
translateX (x):定义转换,只是用x轴的值。
translateY (y):定义转换,只是用y轴的值。
translateZ (z):定义3 d转换,只是用z轴的值。
规模(x, y):定义2 d缩放转换。
scale3d (x, y, z):定义3 d缩放转换。
scaleX (x):通过设置x轴的值来定义缩放转换。
写入scaleY (y):通过设置y轴的值来定义缩放转换。
scaleZ (z):通过设置z轴的值来定义3 d缩放转换。
旋转(角度):定义2 d旋转,在参数中规定角度。
rotate3d (x, y, z,角度):定义3 d旋转。
rotateX(角):定义沿着x轴的三维旋转。
rotateY(角):定义沿着y轴的三维旋转。
rotateZ(角):定义沿着z轴的三维旋转。
斜(x-angle角度y):定义沿着x和y轴的2 d倾斜转换。
skewX(角):定义沿着x轴的2 d倾斜转换。
skewY(角):定义沿着y轴的2 d倾斜转换。
角度(n):为3 d转换元素定义透视视图。
<强>注:10 ie, Firefox、Opera支持变换属性与Explorer 9支持替代的-ms-transform属性(仅适用于2 d转换).Safari和Chrome支持替代的-webkit-transform属性(3 d和2 d转换).Opera只支持2 d转换。
<强>
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; style>
{前* *,*::
box-sizing: border-box;
}
身体{
背景:# F5F3F4;
保证金:0;
填充:10 px;
字体类型:& # 39;无# 39;开放,无衬线;
text-align:中心;
}
h3, h5 {
粗细:400;
颜色:# 4 d4d4d;
}
.card {
显示:inline-block;
保证金:10 px;
背景:# fff;
填充:10 px;
min-width: 180 px;
不必:0 3 px 5 px # ddd;
颜色:# 555;
}
.card .box {
宽度:60 px;
高度:60 px;
保证金:汽车;
背景:# ddd;
光标:指针;
不必:0 0 5 px # ccc插图;
}
.card .box .fill {
宽度:60 px;
高度:60 px;
位置:相对;
背景:# 03 a9f4;
透明度:5;
不必:0 0 5 px # ccc;
-webkit-transition: 0.3秒;
过渡:0.3秒;
}
.card p {
保证金:25 px 0 0;
}
.rotate:悬停.fill {
-webkit-transform:旋转(45度);
变换:旋转(45度);
}
.rotateX:悬停.fill {
-webkit-transform: rotateX(45度);
变换:rotateX(45度);
}
.rotateY:悬停.fill {
-webkit-transform: rotateY(45度);
变换:rotateY(45度);
}
.rotateZ:悬停.fill {
-webkit-transform:旋转(45度);
变换:旋转(45度);
}
.scale:悬停.fill {
-webkit-transform:规模(2,2);
变换:规模(2,2);
}
.scaleX:悬停.fill {
-webkit-transform: scaleX (2);
变换:scaleX (2);
}
.scaleY:悬停.fill {
-webkit-transform:写入scaleY (2);
变换:写入scaleY (2);
}
.skew:悬停.fill {
-webkit-transform:斜(45度,45度);
变换:斜(45度,45度);
}
.skewX:悬停.fill {
-webkit-transform: skewX(45度);
变换:skewX(45度);
}
.skewY:悬停.fill {
-webkit-transform: skewY(45度);
变换:skewY(45度);
}
.translate:悬停.fill {
-webkit-transform:翻译(45 px, 1 em);
变换:翻译(45 px, 1 em);
}
.translateX:悬停.fill {
-webkit-transform: translateX (45 px);
变换:translateX (45 px);
}
.translateY:悬停.fill {
-webkit-transform: translateY (45 px);
变换:translateY (45 px);
}
.matrix:悬停.fill {
-webkit-transform:矩阵(45岁的2 2 0 2 0);
变换:矩阵(45岁的2 2 0 2 0);
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; !——旋转比;
& lt; div类=癱ard"祝辞
& lt; div类=皉otate"盒;比;
& lt; div类=癴ill"祝辞& lt;/div>
& lt;/div>
& lt; p>旋转(45度)& lt;/p>
& lt;/div>
& lt; div类=癱ard"祝辞
& lt; div类=皉otateX"盒;比;
& lt; div类=癴ill"祝辞& lt;/div>
& lt;/div>
& lt; p> rotateX(45度)& lt;/p>
& lt;/div>
& lt; div类=癱ard"祝辞
& lt; div类=皉otateY"盒;比;
& lt; div类=癴ill"祝辞& lt;/div>
& lt;/div>
& lt; p> rotateY(45度)& lt;/p>
& lt;/div>
& lt; div类=癱ard"祝辞
& lt; div类=皉otateZ"盒;比;
& lt; div类=癴ill"祝辞& lt;/div>
& lt;/div>
& lt; p> rotateZ(45度)& lt;/p>
& lt;/div>
& lt; !——规模比;
& lt; div类=癱ard"祝辞
& lt; div类=皊cale"盒;比;
& lt; div类=癴ill"祝辞& lt;/div>
& lt;/div>
& lt; p> (2) & lt;规模/p>
& lt;/div>
& lt; div类=癱ard"祝辞
& lt; div类=皊caleX"盒;比;
& lt; div类=癴ill"祝辞& lt;/div>
& lt;/div>
& lt; p> scaleX (2) & lt;/p>
& lt;/div>
& lt; div类=癱ard"祝辞
& lt; div类=皊caleY"盒;比;
& lt; div类=癴ill"祝辞& lt;/div>
& lt;/div>
& lt; p>写入scaleY (2) & lt;/p>
& lt;/div>
& lt; !——斜祝辞
& lt; div类=癱ard"祝辞
& lt; div类=皊kew"盒;比;
& lt; div类=癴ill"祝辞& lt;/div>
& lt;/div>
& lt; p>斜(45度,45度)& lt;/p>
& lt;/div>
& lt; div类=癱ard"祝辞
& lt; div类=皊kewX"盒;比;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
