语法
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 转换元素定义透视视图。
transform: rotate(60deg)
scalesd(1,1,1);}
- 表示在此轴上定义，0:不定义
Angel：角度，单位是deg
缩放：按照百分比缩放；比如：1：100%
- Transition属性：定义元素静态属性变成动态属性
Transition:属性 动态时间[速度方式]
Eg：transition:width 1s ease-in 让宽动态变化，时间是一秒完成，速度是加速
3.box-shadow:阴影属性
Box-shadow:x轴 y轴 阴影的长度 阴影的颜色
4.border-dario边框的子属性：边框弧度
边框弧度：上下左右都可以
三、jQuery框架
框架：提高效率
jQuery框架 封装好了javaScript常用的功能代码，提供一种简便的javaScript设计模式，优化HTML文档操作，事件的处理，动画设计和Ajax交互
1.Jquery基本语法
Jquery封装DOM获取标签的方式
美元符号：$:jQuery标识符号
Document.getElementById(“idName”); --->$(“#idName”);
DOM获取标签方式：$(选择器 或 标签对象)；
$(“#id”):通过id获取标签
$(“.class”):通过类获取标签
$(“标签”):通过标签名获取标签
$(“div #id”):通过div中的#id标签获取
$(“div,a”):通过div 和 a标签
2.使用jQuery框架
获取元素的方式
$(".c1").css("font-size","36px");
$("div").css("color","red");
$("#d1 a").html("超链接");
$("#d1 a").css("text-decoration","none");
$("*").addClass("c2");
4.jQuery的常用方法
(1)预加载方法
$(document).ready(function () {
});
相当于：onload，比onload更早
等DOM对象 加载完成后，再加载JS代码
可以简写：
$(function () {
//JS代码
});
(2)标签绑定事件
获取绑定事件的标签. 事件(触发的方法)；
//添加事件，添加事件触发的方法
$("#but2").click(方法) {
});
(3)循环遍历
//让所有的div标签 遍历添加内容
//each():遍历的方法，遍历此对象中的所有标签
$("div").each(function () {
$(this).html("hello jquery!");
});
(4)animate():动态效果方法
Animate()方法是transition属性的升级版
Animate({样式}，时间，速度方式，回调方法)；
样式：必写，逐渐改变css属性值，形成动画效果
使用+= 和 -= 累加来形成累加css样式
时间：动画完成的时间，单位：毫秒/”fase”/”slow”;
速度方式:”swing”,”linear”；
回调函数：执行方法后再触发的方法
$("#but1").click(function () {
//让div调用animate方法
$("div").animate({width:'200px',height:'200px'},
2000,
"swing",
function () {
//动画完成后触发一次方法
$("div").animate({width:'100px',height:'100px'},
2000,
"swing"
);
}
);
});
(5)关键字
//toggle：从0-目前值 的切换效果
//opacity:透明度 属性； 值：0.0-1.0；
// onload="方法()" 与window.onload=方法名
window.onload=dvMethod();
作用：在页面文档加载完后，加载JS的方法
(6)滑动隐藏于显现
Slid():向上滑动隐藏标签/slidDown：向下滑动展现标签
Slid(时间，速度，回调函数);slidDown一致
时间：完成的时间，单位：毫秒/”fase”/”slow”;
速度方式:”swing”加速,”linear”匀速；
回调函数：执行方法后再触发的方法
(7)JQuery版隐藏于显现
与CSS的属性display是一样
Hide(时间，速度，回调函数)/show();
时间：完成的时间，单位：毫秒/”fase”/”slow”;
速度方式:”swing”加速,”linear”匀速；
回调函数：执行方法后再触发的方法