Transform 转换

css3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它分为2D转换或 3D转换。

在css2时代，如果要做一些图片转化角度，都依赖于图片、Flash或javascript才能完成。但是现在借助css3就可以轻松移动、缩放、倾斜、翻转元素。通过css变形，可以让元素生成静态视觉效果，但也可以很容易结合css3的transition和动画keyframe产生一些动画效果。

Transform转化 2D的属性

退出的属性包含了属性名和属性值，而css3的transform属性使用函数来定义的。transform 2D函数包含了translate()、scale()、rotate()、skew()

tanslate() 函数

translate() 方法，根据左（x轴）和顶部（y轴）位置给定的参数，从当前元素位置移动，接受css的标准度量单位（px）

translate(x, y)：转换，沿着x和y轴移动元素。
rotate() 函数

通过rotate() 方法，元素顺时针给定的角度。运行负值，元素将逆时针旋转。它以deg为单位，代表了旋转的角度。
scale() 函数

通过值把宽和高转换为原始尺寸的n倍，接受两个参数，前面的参数为宽，后面的参数为高。

可取值：

默认为1

缩放：0-1之间的数

放大：大于1的数
skew() 函数

根据水平轴和垂直轴翻转，接受两个或一个值，两个值时前面为水平，后面为垂直的角度，一个值只是水平轴的角度。此函数是指元素的倾斜角度，它以deg为单位。

div{width: 200px;height: 200px;border: 1px solid blue;margin: 200px auto;
}div:hover{/* 水平方向移动20px  垂直方向移动10px *//* transform: translate(20px, 10px); *//* 正数：顺时针旋转45度  负数：逆时针旋转45度 *//* transform: rotate(45deg);transform: rotate(-45deg); *//* 宽缩小0.5 高缩小0.5 *//* transform: scale(0.5, 0.5); *//* 宽放大1.5 高放大1.5 *//* transform: scale(1.5, 1.5); *//* 一个值时，水平方向和垂直方向为50度的倾斜  两个值时，第一个值为水平，第二个参数为垂直 *//* transform: skew(50deg, 50deg); */
}<div id="box"></div>

Transform 转换相关推荐

transform(转换)
transform(转换) transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,变形,缩放等效果. 浏览器支持情况 Internet Explorer 10.Firefox. ...
CSS3的动画及3D转换（animation、transform、rotate3d 、perspective等）【总结】
目录 1. 动画 ① 创建 ② 属性 ③ 关键帧 2. 3D ① transform转换 ② rotate3d ③ translate3d ④ perspective ⑤ transform-styl ...
css笔记 - transform学习笔记(二)
transform转换 CSS transform 属于2D/3D上的转换.变形效果.他不是一个动画,他就是变形.比如正方形变平行四边形,再变圆形.都是形状变成另一个形状. 但是如果配合上transi ...
【Java代码】坐标系说明+WGS84\GCJ02\BD09坐标系转换工具+Java坐标系转换及验证源代码分享（粘贴可用）
1. 坐标系说明开发地图应用服务时,一定会接触到各种坐标系,而保证坐标系的正确与合理是一切数据分析的前提,总的来说,坐标系可以分为两大类:地理坐标系GCS(Geographic Coordinate ...
transform、transition 动画效果
transform 转换,变形 origin 定义旋转基点(left top center right bottom 坐标值) transform-origin: 50px 50px; transfo ...
css3盒模型、过渡、转换介绍
CSS3中盒模型: 前面CSS中学到的盒子模型给padding.border会撑开盒子的大小,实际大小要通过计算才能得到,为了解决这个问题,CSS3推出了box-sizing属性来解决此问题,当box ...
CSS3中的transition和transform属性
一.前言开门见山的说,transition.transform和translate这三者经常有人搞混,先把这三者做一个简单解释: transform是转换,指的是改变所在元素的外观,它有很多种手段 ...
transition transform translate 之间的区别
文章目录 01.transform(转换) 和 translate 02.transition(过渡) 01.transform(转换) 和 translate transform的中文翻译是变换.变 ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...

Transform 转换

Transform 转换

Transform转化 2D的属性

Transform 转换相关推荐

最新文章

热门文章