CSS3 (css3新增属性有哪些)

本文目录导航：

• CSS3 —— 过渡、动画和变换
• css3 transition和transform的运行
• 为什么css3经常使用transform作为属性而不是间接经常使用rotate，translate

CSS3 —— 过渡、动画和变换

CSS过渡个性准许咱们管理运行新属性值的速度，成功平滑的视觉成果。

动画则是在如何从一种CSS样式过渡到另一种样式的环节中，提供更多的灵敏性。

CSS动画实质上是增强的过渡，可以设置动画的继续期间、延时、循环次数以及播放方向等属性，使得页面元素以灵活的模式展现，参与用户体验。

变换是CSS提供的另一种弱小的配置，准许咱们为元素运行线性变换，包含旋转、缩放、歪斜敌对移等操作。

经过经常使用transform属性，咱们可以在不扭转页面规划的状况下，调整元素的位置、大小和状态，为网页设计带来更多的创意和多样性。

在成功变换时，transform属性是一个关键点。

它接受一系列变换操作作为参数，例如rotate()、scale()、skew()和translate()等。

经过组合这些变换操作，可以创立出复杂的动画成果和交互配置，为用户提供愈加丰盛的视觉体验。

总结而言，CSS过渡、动画和变换是现代网页设计中无法或缺的三大个性。

它们不只能够优化页面的视觉吸引力，还能够增强用户体验，为网页设计带来有限的或许性。

css3 transition和transform的运行

一、首先学习的是transition属性（zoom不支持transition,实用于详细数值的属性值变化或许背景图的变换） transition 过渡 作为一个复合属性 -property 指定可以过渡的属性 自动值是all 定义运行过渡成果的 CSS 属性称号列表，列表以逗号分隔。

-duration 指过渡成功的期间 自动值为0s -timing-function 过渡的动画类型 自动值为ease ease 规则慢速开局，而后变快，之后慢速完结的过渡成果 ease-in 规则以慢速开局的过渡成果 ease-out 规则以慢速完结的过渡成果 ease-in-out 规则以慢速开局和完结的过渡成果 linear 规则以相反速度开局至完结的过渡成果 cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值 -delay 提前口头过渡的期间 自动值为0s 二、transform属性 transform 向元素运行2D或3D转换 只对block级元素失效 位移 translateX() 在x轴上出现位移或许变形 translateY() 在y轴上出现位移或许变形 translate(x,y) 在x轴 ，y轴上出现位移或许变形 当只要一个值的时刻，只要x轴失效 缩放 scaleX() 设置在x轴上出现缩放 scaleY() 设置在y轴上出现缩放 scale(x,y) 设置在x轴，y轴上出现缩放 当只要一个值的时刻，x，y轴都出现缩放可以设置正数 经常使用场景：设置小于12px的字体 旋转 2d旋转 设置元素在2d平面旋转（z轴），正数按顺时针，正数按逆时针 rotateX（）设置沿x轴旋转 rotateY ()设置沿y轴旋转 歪斜 skewX 绕x轴出现歪斜 skewY 绕y轴出现歪斜 skew(x,y) 绕x,y轴出现的歪斜 x轴和y轴和咱们了解的相反，罕用于平行四边形图案 三、transform-origin: 设置旋转元素的基点位置 transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只要在设置了transform属性的时刻起作用； 由于咱们元素自动基点就是其核心位置，换句话说咱们没有经常使用transform-origin扭转元素基点位置的状况下，transform启动的rotate,translate,scale,skew,matrix等操作都是以元素自己核心位置启动变化的。

但有时刻咱们须要在不同的位置对元素启动这些操作，那么咱们就可以经常使用transform-origin来对元素启动基点位置扭转，使元素基点不在是核心位置，以到达你须要的基点位置。

上方咱们重要来看看其经常使用规则： transform-origin(X,Y):用来设置元素的静止的基点（参照点）。

自动点是元素的核心点。

其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。

语法：-moz-transform-origin: [ || left | center | right ][ || top | center | bottom ] ? transform-origin接受两个参数，它们可以是百分比，em，px等详细的值，也可以是left,center,right，或许 top,center,bottom等形容性参数 ; top left | left top 等价于 0 0； top | top center | center top 等价于 50% 0 right top | top right 等价于 100% 0 left | left center | center left 等价于 0 50% center | center center 等价于 50% 50%（自动值） right | right center | center right 等价于 100% 50% bottom left | left bottom 等价于 0 100% bottom | bottom center | center bottom 等价于 50% 100% bottom right | right bottom 等价于 100% 100%

为什么css3经常使用transform作为属性而不是间接经常使用rotate，translate

CSS3transform是什么？transform的含意是：扭转，使…变形；转换CSS3transform都有哪些罕用属性？transform的属性包含：rotate()/skew()/scale()/translate(,)，区分还有x、y之分，比如：rotatex()和rotatey()，以此类推。

上方咱们来合成各个属性的用法：transform:rotate()：含意：旋转；其中“deg”是“度”的意思，如“10deg”示意“10度”下同。

_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}transform:skew()：含意：歪斜；_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}transform:scale()：含意：比例；“1.5”示意以1.5的比例加大，假设要加大2倍，须写成“2.0”，增加则为负“-”。

_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}transform:translate()：含意：变化，位移；如下示动向右位移120像素，假设向上位移，把前面的“0”改个值就行，向左向下位移则为负“-”。

_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}transform综合：transform的罕用属性就是这些了，上方咱们借助transition的帮助来展示一个对于css3transform的综合实例_transform5{-webkit-transition:all1sease-in-out;-moz-transition:all1sease-in-out}_transform5:hover{-webkit-transform:rotate(360deg)skew(-20deg)scale(3.0)translate(100px,0);-moz-transform:rotate(360deg)skew(-20deg)sca