transform 属性之简单变换方法
2017-12-28 21:45
423 查看
本文是解析 transform 属性系列的第一篇。
translate
rotate
scale
skew
matrix
注意:元素应用转换方法时,默认情况下,都是以元素原始位置的中心为中心点进行转换。
如上图,图片的移动即是通过设置 translate() 方法实现的。
代码如下:
如上图,当元素设置了 rotate() 方法之后,会在元素的原始位置应用旋转效果。
代码如下:
如上图,通过使用 scale() 方法,我们将图片的宽度变为原来的一半,同时高度保持不变。这里也是以元素原始位置的中心点为中心进行转换的。
代码如下:
如上图,我们给图片设置了沿水平方向的倾斜。对于沿水平方向的倾斜,设倾斜角度为 θ,当 tanθ 值为正数时,元素会向右倾斜(上边界向左倾斜,下边界向右倾斜);当 tanθ 为负数时,元素会向左倾斜(上边界向右倾斜,下边界向左倾斜)。
代码如下:
如上图,我们给图片设置了竖直方向的倾斜。对于沿竖直方向的倾斜,设倾斜角度为 θ,当 tanθ 值为正数时,元素会向下倾斜(左边界向上倾斜,右边界向下倾斜);当 tanθ 为负数时,元素会向上倾斜(左边界向下倾斜,右边界向上倾斜)。
代码如下:
如上图,我们给图片同时设置了沿水平方向和竖直方向的倾斜。
代码如下:
更多 CSS 技巧,请关注微信公众号
定义
transform 属性用于给元素应用 2D 或 3D 变换。通过该属性,我们可以对元素进行旋转、缩放、移动或倾斜。语法
transform:none | transform-functions;2D 转换
2D 转换常用的方法如下:translate
rotate
scale
skew
matrix
注意:元素应用转换方法时,默认情况下,都是以元素原始位置的中心为中心点进行转换。
translate(x, y)
translate(x, y) |
---|
translate 方法用于移动元素,x 代表横向移动距离,y 代表纵向移动距离。 |
如上图,图片的移动即是通过设置 translate() 方法实现的。
代码如下:
.transform-style { transform: translate(300px, 200px); }
rotate(degree)
rotate(degree) |
---|
rotate 方法用于将元素旋转一定的角度。当 degree 的值为正数时,顺时针旋转元素;为负值时,逆时针旋转元素。 |
如上图,当元素设置了 rotate() 方法之后,会在元素的原始位置应用旋转效果。
代码如下:
.transform-style { transform: rotate(45deg); }
scale(widthRatio, heightRatio)
scale(widthRatio, heightRatio) |
---|
scale 方法用于将元素的尺寸成倍增加或减少。widthRatio 用于指定元素宽度的转换倍率,heightRatio 用于指定元素高度的转换倍率。 |
如上图,通过使用 scale() 方法,我们将图片的宽度变为原来的一半,同时高度保持不变。这里也是以元素原始位置的中心点为中心进行转换的。
代码如下:
.transform-style { transform: scale(0.5, 1); }
skew(xDegree, yDegree)
skew(xDegree, yDegree) |
---|
skew 方法用于将元素倾斜一定的角度。xDegree 代表沿水平方向(X轴)倾斜的角度,yDegree 代表沿竖直方向(Y轴)倾斜的角度。 |
如上图,我们给图片设置了沿水平方向的倾斜。对于沿水平方向的倾斜,设倾斜角度为 θ,当 tanθ 值为正数时,元素会向右倾斜(上边界向左倾斜,下边界向右倾斜);当 tanθ 为负数时,元素会向左倾斜(上边界向右倾斜,下边界向左倾斜)。
代码如下:
.transform-style { transform: skew(30deg, 0deg); }
如上图,我们给图片设置了竖直方向的倾斜。对于沿竖直方向的倾斜,设倾斜角度为 θ,当 tanθ 值为正数时,元素会向下倾斜(左边界向上倾斜,右边界向下倾斜);当 tanθ 为负数时,元素会向上倾斜(左边界向下倾斜,右边界向上倾斜)。
代码如下:
.transform-style { transform: skew(0deg, 30deg); }
如上图,我们给图片同时设置了沿水平方向和竖直方向的倾斜。
代码如下:
.transform-style { transform: skew(30deg, 30deg); }
更多 CSS 技巧,请关注微信公众号
相关文章推荐
- 使用css3 transform 属性来变换背景图方法步骤详解
- Unity3D Transform中有关旋转的属性和方法测试
- jquery通过name属性取值的简单实现方法
- 一种简单的实时下变换方法
- 简单的JAVABEAN属性复制方法!
- 理解SVG坐标系统和变换: transform属性
- android Mediaplayer各种属性和方法简单介绍
- string,array的属性和方法简单一览
- JS中的内置对象简介与简单的属性方法
- iOS系统UIPickerView的简单使用和方法属性介绍
- Unity3D Transform中有关旋转的属性和方法测试
- ecshop 在任何页面调用商品属性 超简单实用方法
- Unity3D Transform中有关旋转的属性和方法测试
- android Mediaplayer各种属性和方法简单介绍
- CSS 3D转换——transform属性的rotatex()方法和rotatey()方法
- MJRefresh更新,方法更简单好用。和旧版相比部分属性或者方法需要添加前缀mj_
- iOS学习之UI初级————CGAffineTransform坐标系统变换以及UIView的属性动画
- 简单介绍一下asmack中常用到的方法属性
- UITabBarController的简单使用和属性方法总结
- 简单的对象属性值对比方法