语法
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”匀速;
回调函数:执行方法后再触发的方法