css变形transform属性详细介绍
程序员文章站
2022-04-20 08:34:18
...
transition：过度属性
transition-property 规定设置过度效果的css属性的名称，默认可以写all
transition-duration 规定完成过度效果需要多少秒或毫秒
transition-timing-function: 默认easetransition-delay：延时时间
ease:逐渐变慢
linear:匀速
ease-in:加速
ease-out:减速
ease-in-out:先加速在减速
cubic-bezier：贝塞尔曲线
transitionend：过度完成事件
function addEnd(obj,fn){
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
function removeEnd(obj,fn){
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}
注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件 2注意重复触发transitionend事件。比如下面重复改变p的y轴位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
</style>
</head>
<body>
<div id="nav"></div>
<script>
var oHome=document.getElementById("nav");
var count = 10;
oHome.onclick = function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
addEnd(this,function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
})
}
function addEnd(obj,fn) {
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
</script>
</body>
</html>
transform：变形
旋转：rotate()：度数
斜切：skew()：度数
skewX
skewY
缩放：scale()：正数、负数、小数
scaleX
scaleY
位移：translate()：css支持的单位都可以
translateX
translateY
transform的执行顺序：后写的先执行
transform: scale(2) rotate(50deg); 先执行旋转，在执行缩放
以上transform的值，也会根据中心点（transform-origin）来改变
以上就是css变形transform属性详细介绍的详细内容，更多请关注其它相关文章！
推荐阅读
-
android TextView属性的详细介绍 分享
-
CSS3中的transform属性进行2D和3D变换的基本用法
-
CSS3新属性transition-property transform box-shadow实例学习
-
CSS3中设置3D变形的transform-style属性详解
-
HTML5的自定义属性data-*详细介绍和JS操作实例
-
HTML5 visibilityState属性详细介绍和使用实例
-
两种CSS3伪类选择器详细介绍
-
实例讲解CSS3中Transform的perspective属性的用法
-
css3中background新增的4个新的相关属性用法介绍
-
Android自定义控件属性详细介绍