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: 水平坐标 垂直坐标 :旋转中心点,默认是几何中心,也就是当前标签的中心点;

相关文章
CSS3 transform 文字切斜展开动画
CSS3 transform 文字切斜展开动画
148 0
CSS3 transform 立体导航栏
CSS3 transform 立体导航栏
124 0
|
前端开发 JavaScript
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
JavaScript 前端开发
CSS3 transform 字体模糊问题
CSS3 transform 字体模糊问题
289 0
|
前端开发
CSS中transform的使用
CSS中transform的使用
275 1
|
前端开发
CSS transform实现按钮边框旋转效果
CSS transform实现按钮边框旋转效果
223 1
|
人工智能 前端开发 图形学
CSS3 转换动画transform
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 您可以使用 2D 或 3D 转换来转换您的元素。
242 1
CSS3 transform: translateX || translateY || translateZ
CSS3 transform: translateX || translateY || translateZ
105 0
CSS3 transform 音乐盒子开盖效果
CSS3 transform 音乐盒子开盖效果
113 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    228
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    220
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    159
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    130
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    269
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    401
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    175
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    111
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    187
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    257