Lines Matching refs:transform
1 # transform样式动画
3 设置transform属性对组件进行旋转、缩放、移动和倾斜。
40 transform: rotate(45deg);
55 transform: translate(150px,-137px);
64 transform: translate(-150px,-400px) scale(1.5);
88 transform: translate(200px,-710px) skewX(-5deg);
134 transform: translate(0px,0px);
138 transform: translate(10px,900px);
142 transform: translate(20px,500px);
146 transform: translate(30px,900px);
150 transform: translate(40px,700px);
153 transform: translate(50px,900px);
156 transform: translate(60px,800px);
159 transform: translate(70px,900px);
162 transform: translate(80px,850px);
166 transform: translate(90px,900px);
176 设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转角度可为负值，负值则代表旋转…
220 transform-origin: 10% 10px;
225 transform-origin: right bottom;
229 transform: rotate(0deg)
232 transform: rotate(360deg);
278 transform:rotate3d(0,0,0,0deg)
281 transform:rotate3d(20,20,20,360deg);
284 transform:rotate3d(0,0,0,0deg);
290 transform:rotate3d(0,0,0,0deg)
293 transform:rotate3d(0,0,10,30deg);
296 transform:rotate3d(0,0,10,-30deg);
299 transform:rotate3d(0,0,0,0deg);
308 > transform-origin变换对象的原点位置，如果仅设置一个值，另一个值为50%，若设置两个值第一个值表示X轴的位置，第二个值表示Y轴的位置。
365 transform: scale(1);
369 transform: scale(3);
373 transform: scale(1);
394 transform: scale3d(1, 1, 1);
397 transform: scale3d(1.25, 0.75, 1.1);
400 transform: scale3d(0.75, 1.25, 1.2);
403 transform: scale3d(1.15, 0.85, 1.3);
406 transform: scale3d(.95, 1.05, 1.2);
409 transform: scale3d(1.05, .95, 1.1);
412 transform: scale3d(1, 1, 1);
421 > 设置transform属性值后，子元素会跟着父元素一起改变，若只改变父元素其他属性值时（如：height，width），子元素不会改变。
452 transform: matrix(1,0,0,1,0,0);
455 transform: matrix(1,0,0,1,0,200);
458 transform: matrix(2,1.5,1.5,2,0,700);
461 transform: matrix(1,0,0,1,0,0);
469 ## 整合transform属性
471 transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。
532 transform: translate(0,0); transform: rotate(0deg)
535 transform: translate(0,500px);
536 transform: rotate(360deg)
542 transform:translate(0,0) rotate(0deg) ;
545 transform: translate(300px,0) rotate(360deg);
550 transform:rotate(0deg) translate(0,0);
553 transform:rotate(360deg) translate(300px,0);
559 transform: scale(0.5);
562 transform:scale(2) rotate(45deg);
568 transform:scale(0) translate(0,0) rotate(0);
571 transform: scale(1.5) rotate(360deg) translate(200px,0);
579 > - 当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale(1) rotate(0) transl…
581 > - transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。
583 > - transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。
588 针对transform样式动画开发，有以下相关实例可供参考：