企业官网建设流程全解析

transform 用于实现变形（形变位不变）IE8及以下不支持元素本身的位置（大小、坐标）没有发生变化，并且不占位

Transform：translate | scale | skew | rotate

功能：transform主要是用来对元素进行2d或3d变换的

Translate：是用来做位移的

Scale：是用于缩放的

Skew：是用于倾斜的

Rotate：是用于旋转的

直接使用以上属性是2d变换，在单词后面加上3d是做3d变换；

1. transform:skew()/skewX()/skewY();

skew:用于完成倾斜（扭曲）

deg：表示度数，默认情况下表示x轴倾斜

x y 不区分大小写

skew(15deg,30deg)两个参数表示x y轴同时变形

skew不支持z轴。最多只能传两个参数

2. transform：rotate(45deg) 默认是Z轴

rotate：用于旋转,单位deg

transform：rotateX(45deg)沿x轴水平旋转

transform：rotateY（45deg）沿Y轴垂直旋转

transform：rotateZ（45deg）沿Z轴旋转

3. transform:scale:表示缩放

transform:scale(2)表示宽度和高度一起缩放

transform:scaleX(2)=transform:scale(2,1):表示宽度为原来的2倍

transform:scaleY(2)=transform:scale(1,2):表示高度为原来的2倍

4. transform:translate 位移

如果只有一个值，默认表示X轴位移

X轴：正值表示向右移动，负值表示向左移动

Y轴：正值表示向下移动，负值表示向上移动

transform:translateX(300px)表示元素向右移动300px

translateY(200px)==translate(0,200px)表示元素向下移动200px

transform 用于实现变形（形变位不变）IE8及以下不支持元素本身的位置（大小、坐标）没有发生变化，并且不占位

Transform：translate | scale | skew | rotate

功能：transform主要是用来对元素进行2d或3d变换的

Translate：是用来做位移的

Scale：是用于缩放的

Skew：是用于倾斜的

Rotate：是用于旋转的

直接使用以上属性是2d变换，在单词后面加上3d是做3d变换；

1. transform:skew()/skewX()/skewY();

skew:用于完成倾斜（扭曲）

deg：表示度数，默认情况下表示x轴倾斜

x y 不区分大小写

skew(15deg,30deg)两个参数表示x y轴同时变形

skew不支持z轴。最多只能传两个参数

2. transform：rotate(45deg) 默认是Z轴

rotate：用于旋转,单位deg

transform：rotateX(45deg)沿x轴水平旋转

transform：rotateY（45deg）沿Y轴垂直旋转

transform：rotateZ（45deg）沿Z轴旋转

3. transform:scale:表示缩放

transform:scale(2)表示宽度和高度一起缩放

transform:scaleX(2)=transform:scale(2,1):表示宽度为原来的2倍

transform:scaleY(2)=transform:scale(1,2):表示高度为原来的2倍

4. transform:translate 位移

如果只有一个值，默认表示X轴位移

X轴：正值表示向右移动，负值表示向左移动

Y轴：正值表示向下移动，负值表示向上移动

transform:translateX(300px)表示元素向右移动300px

translateY(200px)==translate(0,200px)表示元素向下移动200px

animation 动画

自执行 ：用于实现关键帧动画式的风格

-webkit-animation：name duration timing-function delay iteration-count direction fill-mode play-state

1.animation-name 用来定义一个动画的名称，transition-name相同

2.animation-duration 用来指定元素播放动画所持续的时间，单位s秒，其默认值是“0”；transition-duration 相同

3.animation-timing-function：动画的播放方法，transition-easing相同

4.animation-delay:动画的延迟时间；

5.animation-iteration-count：具体数值;:动画执行的次数，infinite表示无限循环；

6.animation-direction:；表示动画执行方向 alternate 表示正反交替（normal:表示正常状态） 反向：reverse；

7.animation-fill-mode: 用于设置动画结束后的停留点（forwards:表示停留在最后一个点上 backwards:表示停留在第一个点上

默认值:none both:介于最后和开始之间/动画结束或开始的状态）

8.animation-play-state: paused(动画已暂停)|running(动画正在播放);

""关键帧动画必须由@keyframes来引出""

@keyframes 动画名称(name){

执行代码块（0%==from 100%==to）[关键帧动画的单位必须是百分比]

}

关键帧动画可以设置不同时段的百分比效果

transition与animation区别

transition: 过渡平滑的动画 最多4个参数 最少1个（all）

animation: 关键帧 最长8个参数 最少2个

Eg:

<style> * { margin: 0; padding: 0; } #box { width: 300px; height: 300px; background: #0f0; margin: 100px auto; animation: run 3s linear 2s running; /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */ } @keyframes run { form { transform: rotateZ(0deg); } 20% { transform: rotateZ(2deg); } 40% { transform: rotateZ(40deg); } 60% { transform: rotateZ(60deg); } 80% { transform: rotateZ(80deg); } to { transform: rotateZ(100deg); } } </style>