css3 translateX,translateY,translate,transform,transition

来源:互联网 发布:php session的用法 编辑:程序博客网 时间:2024/04/27 21:58

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
用法:transform: rotate(-27deg);
transform: translateX(0);transition: transform .3s ease;

后面可以跟随的值:
这里写图片描述

兼容方式:
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 */
}
其它的都是他转换的效果

transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property
transition-duration
transition-timing-function
transition-delay
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
语法:
transition: property duration timing-function delay;

使用用法:
transition: all .15s ease-in-out;

0 0
原创粉丝点击