css3的常用变形方法有哪些?写出核心代码

html-css029

css3的常用变形方法有哪些?写出核心代码,第1张

css3中的变形

Chrome和safai需前缀加-webkit-,Foxfire需加前缀-moz-

1,旋转 rotate()

div{

width: 300px

height: 300px

transform:rotate(20deg)

}

2,扭曲 skew()

div {

width: 300px

height: 300px

transform:skew(45deg,-10deg)

}

3,缩放 scale()

scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)

也可以只缩放 x轴,或只缩放y轴。

div {

width: 200px

height: 200px

background: orange

}

.wrapper div:hover {

opacity: .5

transform: scale(0.8)

}

4,位移 translate()

translate()函数可以将元素向指定的方向移动,类似于position中的relative。

或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,

而不影响在X、Y轴上的任何Web组件。

5,原点 transform-origin

CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。

但很多时候,我们可以通过transform-origin来对元素进行原点位置改变,使元素

原点不在元素的中心位置,以达到需要的原点位置。

div {

transform: skew(45deg)

transform-origin:top

}

6,过渡

div {

width: 200px

height: 200px

background: red

margin: 20px auto

-webkit-transition-property: all

transition-property: all //指定过渡或动态模拟的css属性 (all是指所有)

-webkit-transition-duration:5s

transition-duration:5s //指定完成过渡的时间

-webkit-transition-timing-function: linear

transition-timing-function: linear//指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1

-webkit-transition-delay: .18s

transition-delay:.18s //指定开始出现的延迟时间

}

div:hover {

width: 400px

height:400px

}

7,Keyframes被称为关键帧,css3中以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{...}”

@keyframes changecolor{

0%{

background: red

}

20%{

background:blue

}

40%{

background:orange

}

60%{

background:green

}

80%{

background:yellow

}

100%{

background: red

}

}

div {

width: 300px

height: 200px

}

div:hover {

animation: changecolor 5s ease-out .2s

}

等价于

div:hover{

animation-name:changecolor

animation-duration:5s

animation-timing-function:ease-out

animation-delay:1

animation-iteration-count:infinite//动画播放次数 整数。

animation-play-state:paused//主要用来控制元素动画的播放状态。

animation-direction:alternate//动画方向,normal每次循环向前,alternate偶次向前,奇数相反。

animation-fill-mode: both//设置动画时间外属性none、forwards、backwords和both

}

CSS3中使用transform属性可实现元素曲线运动。

下面介绍下transform 属性定义及其实例。

定义和用法:

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

默认值: none

继承性: no

版本: CSS3

JavaScript 语法: object.style.transform="rotate(7deg)"

语法transform: none|transform-functions

值         描述

none 定义不进行转换。

matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。

translate(x,y) 定义 2D 转换。

translate3d(x,y,z) 定义 3D 转换。

translateX(x) 定义转换,只是用 X 轴的值。

translateY(y) 定义转换,只是用 Y 轴的值。

translateZ(z) 定义 3D 转换,只是用 Z 轴的值。

scale(x,y) 定义 2D 缩放转换。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 通过设置 X 轴的值来定义缩放转换。

scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

rotate(angle) 定义 2D 旋转,在参数中规定角度。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。

skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

perspective(n) 为 3D 转换元素定义透视视图。

浏览器支持:

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

实例:

实例A:

旋转 div 元素:

div

{

transform:rotate(7deg)

-ms-transform:rotate(7deg)  /* IE 9 */

-moz-transform:rotate(7deg)  /* Firefox */

-webkit-transform:rotate(7deg) /* Safari 和 Chrome */

-o-transform:rotate(7deg)  /* Opera */

}

CSS3 转换。

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

translate() 方法

通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

实例

div

{

transform: translate(50px,100px)

-ms-transform: translate(50px,100px) /* IE 9 */

-webkit-transform: translate(50px,100px) /* Safari and Chrome */

-o-transform: translate(50px,100px) /* Opera */

-moz-transform: translate(50px,100px) /* Firefox */

}

注:Internet Explorer 9 需要前缀 -ms-。