CSS3动画特效——transform详解 还可以和过渡属性(Transition)连用 transition&transform,CSS中过度和变形的设置
前置属性:
transform-origin更改一个元素变形的原点
transform-style:
设置元素的子元素是位于 3D 空间中还是平面中
- flat:平面,如果选择平面即此值,元素的子元素将不会有 3D 的遮挡关系
- preserve-3d:
perspective:指定了观察者与 z=0 平面的距离即开启网页的透视功能
perspective-origin:指定了观察者的位置,用作 perspective 属性的消失点。
backface-visibility:指定当元素背面朝向观察者时是否可见
transform属性:
transform: none|transform-functions;
transform的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 转换元素定义透视视图。 |
1)transform:translate();元素位移
value(值)为位移像素,例:5px。
value只有一个值,横向默认向右移动;有两个值,第二个值纵向默认向下移动。
value若为负值则反方向移动。
<style type="text/css"> .container{ perspective:800px; } .common{ width:100px; height:100px; margin:0 auto; background-color:#75C934; text-align:center; line-height:100px; font-size:12px;word-wrap: normal; } /* transform: translate */ .box-translateX,.box-translateY,.box-translateZ,.box-translate{ -webkit-transition: transform 1s,box-shadow 1s;; } .box-translateX:hover{ transform:translateX(50px); background-color: red; } .box-translateY:hover{ transform:translateY(50px); } .box-translateZ:hover{ transform:translateZ(50px); } .box-translate:hover{ transform:translate(-50px,50px); box-shadow:3px 3px 5px 0px #000; } </style> </head> <body> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-translateX">translateX(50px)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-translateY">translateY(50px)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle;prespective:800px;"> <div class="common box-translateZ">translateZ(50px)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-translate">translate(-50px,50px)</div> </div>
translateZ属于立体效果(近大远小),正常情况下是改变元素与人眼之间的距离,距离越大,元素离人越近
默认情况下网页时不支持透视的,如果需要看见效果则必须设置网页的视距
设置网页的视距为800px(人眼距离网页的距离)所以要达到上面的效果还需要添加
perspective:800px;
2)transform:rotate(value); 元素旋转 value为旋转度数
默认顺时针旋转。度数:deg 圈数:turn
value若为负值则逆时针旋转。
rotate(deg)
rotateX(deg)
rotateY(deg)
rotateZ(deg)
<style type="text/css"> .common{ width:100px; height:100px; margin:0 auto; background-color:#75C934; text-align:center; line-height:100px; font-size:16px; word-wrap:normal; } /* transform: translatxe */ .box-rotateX,.box-rotateY,.box-rotateZ,.box-rotate{ -webkit-transition: transform 1s,box-shadow 1s;; } .box-rotateX:hover{ transform:rotateX(50deg); background-color: red; } .box-rotateY:hover{ transform:rotateY(45deg); /* 旋转后隐藏背面 */ backface-visibility: hidden; } .box-rotateZ:hover{ transform:rotate(45deg); } .box-rotate:hover{ transform:rotate(45deg); box-shadow:3px 3px 5px 0px #000; } /* transform: rotate */ </style> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-rotateX">rotateX(45deg)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-rotateY">rotateY(45deg)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-rotateZ">rotateZ(45deg)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-rotate">rotate(45deg)</div> </div>
transform-origin更改一个元素变形的原点
<style type="text/css"> .example-container { width: 160px; height: 160px; float: left; margin: 0 40px; position: relative; } .example-element { width:160px; height:160px; background: #e4f0f5; font-size: .8rem; transition: transform 1s; } .transform-origin-box1{ transform-origin: center center; } .transform-origin-box2{ transform-origin: left top; } .transform-origin-box3{ transform-origin: 50px 50px; } .transform-origin-box4{ transform-origin: bottom right 60px; } .example-container:hover .example-element{ transform: rotate(30deg); } .static-element{ width: 160px; height: 160px; position: absolute; top: 0; border: dotted 3px #e66465; } </style> <div> <div class="example-container"> <div class="example-element transform-origin-box1">transform-origin: center center;</div> <div class="static-element"> </div> </div> <div class="example-container"> <div class="example-element transform-origin-box2">transform-origin: left top;</div> <div class="static-element"> </div> </div> <div class="example-container"> <div class="example-element transform-origin-box3">transform-origin: 50px 50px;</div> <div class="static-element"> </div> </div> <div class="example-container"> <div class="example-element transform-origin-box4">transform-origin: bottom right 60px;</div> <div class="static-element"> </div> </div> </div>
综合
<style type="text/css"> .container{ perspective:800px; } .common{ width:100px; height:100px; margin:0 auto; background-color:#75C934; text-align:center; line-height:100px; font-size:16px; word-wrap:normal; } .box-rotate-translate,.box-translate-rotate{ -webkit-transition: transform 1s,box-shadow 1s;; } .box-rotate-translate:hover{ transform:rotate(180deg) translateX(100px); } .box-translate-rotate:hover{ transform:translateX(100px) rotate(180deg); } </style> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-rotate-translate">rotate-translate</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-translate-rotate">translate-rotate</div> </div>
3)transform:skew(value);元素倾斜
value(值)为倾斜度数,例:30deg。
value只有一个值,横向默认向左倾斜;有两个值,第二个值纵向默认向上倾斜。
value若为负值则反方向倾斜。
<style type="text/css"> .container{ perspective:800px; } .common{ width:100px; height:100px; margin:0 auto; background-color:#75C934; text-align:center; line-height:100px; font-size:16px; word-wrap:normal; } /* transform: translate */ /* transform: rotate */ /* transform: scale */ /* transform: skew */ .box-skewX,.box-skewY,.box-skewZ,.box-skew{ transition: transform 1s,box-shadow 1s; } .box-skewX:hover{ transform:skewX(45deg); background-color: red; } .box-skewY:hover{ transform:skewY(45deg); /* 旋转后隐藏背面 */ backface-visibility: hidden; } .box-skewZ:hover{ transform:skewZ(45deg); } .box-skew:hover{ transform:skew(45deg,60deg); box-shadow:3px 3px 5px 0px #000; } </style> </head> <body> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-skewX">skewX(45deg)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-skewY">skewY(45deg)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-skewZ">skewZ(45deg)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-skew">skew(45deg)</div> </div>
4)transform:scale();元素缩放
value(值)为缩放倍数,例:2。
value只有一个值,默认整体(XYZ)缩放;有两个值,第一个值横向X缩放,第二个值纵向Y缩放。
value值大于1放大,小于1大于0缩小,负值则反向缩放(元素呈镜像)
<style type="text/css"> .container{ perspective:800px; } .common{ width:100px; height:100px; margin:0 auto; background-color:#75C934; text-align:center; line-height:100px; font-size:16px; word-wrap:normal; } .box-scaleX,.box-scaleY,.box-scaleZ,.box-scale{ transition: transform 1s,box-shadow 1s; } .box-scaleX:hover{ transform:scaleX(1.5); background-color: red; } .box-scaleY:hover{ transform:scaleY(1.5); /* 旋转后隐藏背面 */ backface-visibility: hidden; } .box-scaleZ:hover{ transform:scaleZ(1.5); } .box-scale:hover{ transform:scale(1.5); box-shadow:3px 3px 5px 0px #000; } </style> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-scaleX">scaleX(1.5)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-scaleY">scaleY(1.5)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-scaleZ">scaleZ(1.5)</div> </div> <div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle"> <div class="common box-scale">scale(1.5)</div> </div>
.box{ -webkit-transition: transform 0.8s,border-radius 0.8s; } .box:hover{ transform:scale(2,0.8) scale(2,0.5);/*相当于scale(4,0.4)*/ border-radius:40px; }
.box{ -webkit-transition: transform 0.8s,border-radius 0.8s; } .box:hover{ transform:scale(2,-0.8); border-radius:40px; }
图片缩放效果
.scale{ width:234px; height:120px; overflow: hidden; transform:rotate(0deg); } .scale img:hover{ transform:scale(1.2,1.2); transition: 1s }
特效2:
2D变形:
translate
scale
rotate
skew
matrix
3D变形:
translate3d
scale3d
rotate3d
matrix3d