css3中2D变形tranform总结(附实例)

移动 translate
缩放 scale
旋转 rotate
旋转中心点
skew倾斜

正文

移动 translate

Transform:translate(x,y); X轴跟Y轴的数值
Transform: translateX(); 只给一个数值，移动X轴
Transform: translateY(); 只给一个数值，移动Y轴

注意：常配合过渡效果一起使用

用transform让定位的盒子居中对齐

引进概念：
在transform：translate（x%,y%）;中，
百分数是以本元素为标准而不是以父级元素为标准。
之前定位居中方法是：设置50%的偏移量，然后让居中的盒子往相反的方向移动自身的一半，这个一半是手动计算的固定死的一般，这样不好

新的方法：

.son {position: absolute;  left: 50%;   top: 50%;transform: translate(-50%,-50%);}

缩放 scale

scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：指定对象X轴的（水平方向）缩放
scaley()：指定对象Y轴的（垂直方向）缩放

transform: scale(1.2);

旋转 rotate

语法：

Transform：rotate(180deg); 旋转180度
deg:度数

Backface-visibility: hidden;

隐藏元素的背面，通常用于旋转180度使其不可见

旋转中心点

默认的旋转的中心点是图形的中点

可通过：Transform-origin：；指定中心点的位置

取值：

< percentage >：用百分比指定坐标值。可以为负值。
< length >：用长度值指定坐标值。可以为负值。
left：指定原点的横坐标为left
right：指定原点的横坐标为right
top：指定原点的纵坐标为top
bottom：指定原点的纵坐标为bottom

例子：

            transform-origin: left top;transform-origin: 20px 20px;  /*水平跟垂直方向*/

skew倾斜

skew()：指定对象skew transformation（斜切扭曲）。

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

单位仍然是deg。

对于x轴，正值为左，负值为右。

对于Y轴，正值为上，负值为下。

            transform: skew(10deg, 0);  /*x轴正的往左边歪*/transform: skew(-30deg, 0);  /*x轴负的往右边倾斜*/transform: skew(0, -10deg);  /*y轴负的方向为向下*/

例子：

原图：

transform: skew(30deg,0);

transform: skew(-30deg,0);

 transform: skew(0,30deg);

 transform: skew(0,-30deg);

css3中2D变形tranform总结(附实例)相关推荐

html中2d变形兼容性,CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
CSS3中的变形处理
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...
CSS3中的变形处理--transform功能（旋转、缩放、倾斜、移动）
1.transform属性在CSS3中,可以利用transform功能实现文字或图像的旋转.缩放.倾斜.移动这4中类型的变形处理. (1)浏览器支持到目前为止:Safari3.1以上.Chrome ...
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
1 transform属性在CSS3中,可以利用transform功能实现文字或图像的旋转.缩放.倾斜.移动这4中类型的变形处理. (1)浏览器支持到目前为止:Safari3.1以上.Chrome ...
html文字旋转以后变形,关于css:CSS3中的变形处理transform功能旋转缩放倾斜移动
1 transform属性在CSS3中,能够利用transform性能实现文字或图像的旋转.缩放.歪斜.挪动这4中类型的变形解决. (1)浏览器反对到目前为止:Safari3.1以上.Chrome ...
CSS3中的变形与动画
一.变形旋转 rotate() 通过指定的角度参数使元素相对原点进行旋转. 主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. 正值元素相对原点中心顺时针旋转负值元素相对原点中心逆 ...
深度学习中的Normalization模型（附实例公式）
来源:运筹OR帷幄本文约14000字,建议阅读20分钟. 本文以非常宏大和透彻的视角分析了深度学习中的多种Normalization模型,从一个新的数学视角分析了BN算法为什么有效. [ 导读 ]不 ...
Linux下Desktop文件入门,解析Deepin Linux系统中的Desktop文件，附实例讲解
以下内容为你解析 Deepin Linux 操作系统中的 Desktop Entry 文件,同时附上实例讲解. 概念 Desktop Entry 文件是 Linux 桌面系统中用于描述程序启动配置信息 ...
css3中2D转换效果实现二（6）

css3中2D变形tranform总结(附实例)

css3中2D变形tranform总结(附实例)相关推荐

最新文章

热门文章