translate(x,y)定义2D移动转换
=transform:translateX(100px);数值正负都可以,正向右,负向左./*translate(x)只用x轴的值的移动*/
*=transform:translateY(100px);数值正负都可以,正向下,负向上./*translate(y)只用y轴的值的移动*/
/*scale(x,y)定义2D缩放转换*
transform:scaleX(2)或transform:scaleY(2)/*scale(x/y)通过设置x/y轴的值来定义缩放转换*/
transform:rotate(45rad);/*rotate(45deg-45度)定义2D旋转,在参数中定义角度*/
/*transform: skew(30deg,45deg);transform: skewX(30deg); transform: skewY(45deg)/*分别向x,y;x;y旋转
六个值阵矩-transform:matrix(2,0.3,0.5,2,10,10);/* 第一和第四是缩放;第二和第三是旋转;第五和第六是移动*/
多个变形-transform:translate(100px,100px) scale(0.2,0.2) rotate(45deg)
*transform-origin-改变元素变形的旋转点:transform-origin:left top:x轴可有left,right,center;y轴可有top,bottom,center */
/* transform-origin:0 0; /*表示与数值来为旋转点 */
/* transform-origin:30px 0; /*像素和数值来为旋转点 */
/* transform-origin:30px 30px; /*用像素来为旋转点 */
/* transform-origin:30% 30%;} /* 用百分比来为旋转点*/
组合使用
(2)transform:3D变形
通过CSS3转换,我们能够对元素进行移动、缩放、转移
perspective:1000px;/* 为转换3D元素定义透视视图*/
transform:translate()/rotate()/soale()
3D定义
3D平移
3D旋转
3D缩放
二、transition-过渡元素
/*transition-property-规定应用过渡的CSS属性的名称:none(没有属性会获得过渡效果)/all(所有属性都会将获得过渡的效果)/属性名称,如width,height...*/
transition-duration:2s;/*定义过渡效果花费的时间,默认值是0,单位是秒或毫秒*/
transition-timing-function:具体看css