CSS3 transform

简介: CSS3 transform

旋转动画示例 - 扑克牌动画


在css3 当中,通过transform(变形) 来实现2d 或者3d 转换,其中2d 有,缩放,移动,旋转。


  • scale(x, y) : 缩放, 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;
  • translate(x, y) : 移动, 可以改变元素的位置,x、y可为负值; x 在水平方向移动。 y 在垂直方向移动。
  • rotate(deg) : 旋转, 可以对元素进行旋转,正值为顺时针,负值为逆时针;
  • transform-origin: 水平坐标 垂直坐标 :旋转中心点,默认是几何中心,也就是当前标签的中心点;

相关文章
|
8月前
CSS3 transform 文字切斜展开动画
CSS3 transform 文字切斜展开动画
55 0
|
8月前
CSS3 transform 立体导航栏
CSS3 transform 立体导航栏
30 0
|
5月前
|
JavaScript 前端开发
CSS3 transform 字体模糊问题
CSS3 transform 字体模糊问题
|
8月前
CSS3 transform: translateX || translateY || translateZ
CSS3 transform: translateX || translateY || translateZ
17 0
|
8月前
CSS3 transform 音乐盒子开盖效果
CSS3 transform 音乐盒子开盖效果
29 0
|
8月前
|
前端开发
css提示文字上下左右居中-transform加absolute
css提示文字上下左右居中-transform加absolute
|
9月前
|
前端开发
CSS中transform的使用
CSS中transform的使用
|
9月前
|
前端开发
Css中Transform的属性及使用
Css中Transform的属性及使用
104 0
|
9月前
|
前端开发
CSS transform实现按钮边框旋转效果
CSS transform实现按钮边框旋转效果
|
10月前
|
人工智能 前端开发 图形学
CSS3 转换动画transform
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 您可以使用 2D 或 3D 转换来转换您的元素。
60 1