JS中元素动画效果Transform属性

最新推荐文章于 2024-05-24 16:01:01 发布

xiaokangmiclong

最新推荐文章于 2024-05-24 16:01:01 发布

阅读量3.1w

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/xiaokangmiclong/article/details/50592076

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

元素缩放scale()

1、scale(x,y) 对元素进行缩放。X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。

2、scaleX(n) 元素只在X轴（水平方向）缩放元素。默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点。同理，scaleY(n) 元素只在Y轴（垂直方向）缩放元素。

如下例：

<html>
<head>
<style type="text/css">
.test{
width:200px;
height:50px;
background-color:gray;
color:white;
text-align:center;
cursor:pointer;
display:table-cell;
vertical-align:middle;
}
</style>
<script type="text/javascript">
function scale1(){
document.getElementById("test").style.WebkitTransform="scale(1.1,1)";
document.getElementById("test").style.WebkitTransform="translate(120px)";
document.getElementById("test").style.WebkitTransform="skew(20deg)";
document.getElementById("test").style.WebkitTransform="rotate(370deg)";
}
function scale2(){
document.getElementById("test").style.WebkitTransform="scale(1)";
}
</script>
</head>
<body>
<div style="margin:0 0 0 100px;">
<div class="test" id="test" onMouseOver="scale1()" onMouseOut="scale2()">
这是一个缩放效果测试！
</div>
<div>
</body>
</html>

元素移动translate(120px),用法同上；

元素倾斜skew(10deg),deg代表"度"，用法同上；

元素旋转rotate(10deg),用法同上,按顺时针旋转，没有X、Y轴；

xiaokangmiclong

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JS中元素动画效果Transform属性

1、scale(x,y) 对元素进行缩放X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5); 2、scaleX() 元素只在X轴（水平方向）缩放元素。默认值是1，基点一样在元素的中心位置。可以通过transform-origin来
复制链接

扫一扫