CSS transform Property and animation

参考链接:
CSS transform Property
CSS Animatable

transform 属性,可以将一个元素做一些 2D 或者 3D 的转行操作。比如 旋转、缩放、移动、倾斜等。

transform: scaleX(-1); 可以把一个元素水平翻转,可以把一个镜像的元素还原成一个正常的样子。比如:

CSS transform Property and animation_第1张图片
image

可以变成

CSS transform Property and animation_第2张图片
image

transform: rotate(10deg); 可以把一个元素旋转 10 角度。

比如:

CSS transform Property and animation_第3张图片
image

animation 可以改变元素的 css 属性。

具体可以参考:CSS Animatable

css 示例:

div {
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  transform: rotate(10deg) scaleX(-1);
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;height: 100px;}
}

在 js 中操作实例:

obj.css('transform',"scaleX(-1)");

obj.css("transform","rotate(10deg)");

obj.animate({
  height: "100px"
}, 0 );

你可能感兴趣的:(CSS transform Property and animation)