变形与动画是
css3中的知识,但是一直都掌握的不是很熟练,今天就把它彻底的过一遍
变形
-
CSS transform属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。 -
CSS transform属性 , 只对 block 级元素生效！
transform 语法
-
transform:none |+ - 初始值为
none - fucntion可以为哪些值?
- 语法
+表示可以写多个
- 初始值为
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
transform有很多值可以使用,我们看一下具体有那些值,该怎么使用
-
transform:rotate() -
angle:角度
-
transform:rotate(45deg) //顺时针旋转
transform:rotate(-60deg) //逆时针旋转
.demo pre{
transform:rotate(45deg);
font-size:200px;
line-height:300px;
text-align:center;
}
C
改变rotate的值,元素会随着数值旋转
-
transform:translate(x轴 y轴(可不写))transform:translateX()transform:translateY()- 单位
px %等
transform:translate(20px,50px) //中间用逗号隔开
transform:translate(-40px,20%)
transform:translate(100px) //只表示x轴偏移
transform:translateX(20%)
transform:translateY(20%)
变形之移动translate
-
transform:scale()scale:([, ]?) scaleX()scaleY()
transform:scale(1.2,2) //x轴放大1.2倍 y轴放大2倍
transform:scale(1.2) // x轴 y轴都放大1.2倍
transform:scaleX(1.2) //x轴放大1.2倍
transform:scaleY(1.2)
变形之scale缩放拉伸
-
transform:skew([, ]?) skewX() skewY() - X轴倾斜多少度,Y轴倾斜多少度
transform:skew(30deg) //y轴向x轴倾斜了30deg
transform:skew(30deg,30deg) //y轴向x轴倾斜了30deg x轴也向y轴偏移30deg
transform:skewX(45deg)
transform:skewY(60deg)
变形之skew倾斜
从上面我们学到了很多变形技巧:rotate tranlate scale skew,我们不仅可以一个个使用,也可以组合使用
transform:translate(50px) scale(1.5);
transform:translate(50px) skew(120deg);
变形多重组合使用
-
transform-origin:-
transform-originCSS属性让你更改一个元素变形的原点 默认值:50% 50% 0
-
/* 单值语法 */
transform-origin: 2px;
transform-origin: bottom;
/* 双值语法 */
/* 用两个数字值先水平后垂直，用一个数值一关键字或两关键字不强求顺序 */
transform-origin: 3cm 2px; /* x-offset y-offset */
transform-origin: 2px left; /* y-offset x-offset-keyword */
transform-origin: left 2px; /* x-offset-keyword y-offset */
transform-origin: right top; /* x-offset-keyword y-offset-keyword */
transform-origin: top right; /* y-offset-keyword x-offset-keyword */
/* 三值语法 */
x方向 y 方向 z方向
transform-origin: 2px 30% 10px; /* x-offset y-offset z-offset */
transform-origin: 2px left 10px; /* y-offset x-offset-keyword z-offset */
transform-origin: left 5px -3px; /* x-offset-keyword y-offset z-offset */
transform-origin: right bottom 2cm; /* x-offset-keyword y-offset-keyword z-offset */
transform-origin: bottom right 2cm; /* y-offset-keyword x-offset-keyword z-offset */
定位变形圆点
之前我们了解的都是绕着Z轴旋转,可不可以绕Y轴 X轴旋转呢?我们来学习新的属性
-
perspective: none |- 透视效果
-
length用户到z = 0平面的距离。它用于将透视变换应用于元素及其内容
/* Keyword value */
perspective: none;
/* values */
perspective: 20px;
perspective: 3.5em;
透视效果
-
perspective-origin透视角度-
perspective-origin:50% 50%默认值
-
/* One-value syntax */
perspective-origin: x-position;
perspective-origin: left
/* Two-value syntax */
perspective-origin: x-position y-position;
perspective-origin: left center
perspective-origin: bottom 300px
/* When both x-position and y-position are keywords,
the following is also valid */
perspective-origin: y-position x-position;
/* css */
perspective:2000px; //修改会有不同的视角
perspective-origin:50% 50%;
在上面的了解我们只是对css元素在2d平面上的移动,倾斜,缩放,那如何在3d上动作呢?css属性又有哪些呢?
-
transform:translate3d(x, y, z)- 属性和
translate()差不多,只不过多了一个z轴上的变换 - 也多了
translateZ()
- 属性和
transform:translate3d(10px,20%,200px)
transform:translateX(10px)
transform:translateY(20%)
transform:translateZ(200px)
3d移动
-
transform:scale3d(x, y, z) - 3d上的缩放
transform:scale3d(1.2,1.2,1); //x,y轴变大1.3倍,z不变
transform:scaleZ(5) //并不会影响盒子的大小
3d缩放
-
transform:rotate3d(, , , ) -
rotateZ(z轴上旋转)
-
transform:rotate3d(0,0,1,45deg) //0,0,1表示在z轴上旋转 ,z轴上的1与坐标原点连接
transform:rotate3d(0,1,0,45deg) //表示在y轴上
transform:rotate3d(1,0,0,45deg) //表示在x轴上
transform:rotate3d(1,1,1,45deg) //在坐标为1,1,1与坐标原点连接线上旋转
绕着坐标和圆点连线旋转
我们有一个新的属性需要学习一下
-
transform-style:flat | preserver-3d-
flat扁平化 默认值 -
preserve-3d保留3d空间
-
transform-style:flat
transform-style:preserve-3d
保留3d空间
背面不可见怎么办?
-
backface-visibility:visible | hidden- visible:背面可见
backface-visibility:hidden
背面不可见
过渡效果
-
transition-property:none |= all | IDENT -
none没有过渡动画 -
all所有可被动画的属性都表现出过渡动画 -
IDENT属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头
/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;
/* css示例 */
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;font-size:20px;text-align:center;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo-1 pre{transition-property:none;}
.m-demo-2 pre{transition-property:all;}
.m-demo-3 pre{transition-property:left;}
.m-demo-4 pre{transition-property:left,color;padding:20px 0;line-height:30px;}
none
all
left
left,
color
指定属性过渡动画
-
transtion-duration:-
time表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。 - 以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画
- 可以指定多个时长，每个时长会被应用到由
transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
-
/* /* css示例 */
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-duration:0s;top:0;}
.m-demo pre:nth-child(2){transition-duration:1s;top:150px;}
.m-demo pre:nth-child(3){transition-duration:2s;top:300px;}
.m-demo pre:nth-child(4){transition-duration:3s;top:450px;}
0s
1s
2s
3s
不同的过渡时间
-
transition-timing-function- 定义过渡变化函数
可以取得值
transition-timing-function: ease //默认值,两头慢,中间快
transition-timing-function: ease-in //开始慢
transition-timing-function: ease-out //结束慢
transition-timing-function: ease-in-out //开始结束慢,中间快 幅度大一点
transition-timing-function: linear //匀速
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) //曲线,设置两个点x,y
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end) //分为4步,每步结尾动画
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: inherit
/* css DEMO */
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-timing-function:ease;top:0;}
.m-demo pre:nth-child(2){transition-timing-function:linear;top:150px;}
.m-demo pre:nth-child(3){transition-timing-function:ease-out;top:300px;}
.m-demo pre:nth-child(4){transition-timing-function:cubic-bezier(0.8,0,0,0.8);top:450px;padding:30px 0;line-height:20px;font-size:12px;}
.m-demo pre:nth-child(5){transition-timing-function:steps(3,start);top:600px;padding:30px 0;line-height:20px;font-size:16px;}
ease
linear
ease-out
cubic-bezier
(0.8,0,0,0.8)
steps
(3,start)
不同的值不同的动画步骤
-
transtion-delay:-
time表明动画效果属性生效之前需要等待的时间。延迟时间
-
/* /* css示例 */
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-delay:0s;top:0;}
.m-demo pre:nth-child(2){transition-delay:1s;top:150px;}
.m-demo pre:nth-child(3){transition-delay:2s;top:300px;}
.m-demo pre:nth-child(4){transition-delay:3s;top:450px;}
0s
1s
2s
3s
一样的动画出发时间不同
-
transtion: property name | duration | timing function | delay 简写属性- 初始值:
all 0 ease 0 - 在
transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay
- 初始值:
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
transtion简写过渡属性
动画
- 后续在更新...