CSS3 2D 转换

CSS3 2D 转换

先看兼容性

transform属性向应用元素应用2d 或者 3d装换；该属性允许我们进行旋转，缩放，移动或者倾斜；

基本语法：

transform: none|transform-functions;transform-function：这东东有n的函数可以使用，我先来了解常用的；

rotate(angle)

通过制定角度参数来对原元素指定一个2d的旋转，不过先要设置transform-origin；

它表示旋转的基点；angle设置为正数则顺时针，为负数则表示逆时针；

css：

.demo{height:80px;width:200px;position:absolute;top:50px;background:green;-ms-transform:rotate(7deg);-moz-transform:rotate(7deg);-webkit-transform:rotate(7deg);-o-transform:rotate(7deg);
}

效果：

(默认的它是以自己中心为基点开始旋转滴呀,可以通过改变transform-origin来改变他的值滴呀)

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，

我们就可以使用transform-origin来对元素进行原点位置改变

下图中的红点代表中旋转的基点：

还有更多关于transform-origin的基础知识，我们稍后再总结，我们先对transform有一个总体的认识。

接下来时我们的

Ttranslate（x,y）

TranslateX(x,y)水平方向和垂直方向上的移动，

TranslateX(x)；仅水平方向上的移动;

TranslateY(y)仅垂直方向上的移动；

距离的我们看实例；

Css:

*{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:translate(200px,0px);-ms-transform:translate(200px,0px);-moz-transform:translate(200px,0px);-webkit-transform:translate(200px,0px);-o-transform:translate(200px,0px);
}

效果：

缩放scale（x,y）

scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；

scaleX(x)元素仅水平方向缩放（X轴缩放）

scaleY(y)元素仅垂直方向缩放（Y轴缩放）

其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小

css代码：

*{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:scale(2,2);-ms-transform:scale(2,2);-moz-transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2);
}
.demo1{height:80px;width:160px;float:left;background:red;transform:scaleX(2);-ms-transform:scaleX(2);-moz-transform:scaleX(2);-webkit-transform:scaleX(2);-o-transform:scaleX(2);
}
.demo2{height:80px;width:160px;float:left;background:black;transform:scaleY(2);-ms-transform:scaleY(2);-moz-transform:scaleY(2);-webkit-transform:scaleY(2);-o-transform:scaleY(2);
}

效果：（这里你还发现，虽然div被放大了，但是它原有的占位并没有变化）

扭曲skew(xy,)

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；

*{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:skewX(30deg);-ms-transform:skewX(30deg);-moz-transform:skewX(30deg);-webkit-transform:skewX(30deg);-o-transform:skewX(30deg);
}
.demo1{height:80px;width:160px;float:left;background:red;transform:skewY(10deg);-ms-transform:skewY(10deg);-moz-transform:skewY(10deg);-webkit-transform:skewY(10deg);-o-transform:skewY(10deg);
}
.demo2{height:80px;width:160px;float:left;background:black;transform:skew(30deg,10deg);-ms-transform:skew(30deg,10deg);-moz-transform:skew(30deg,10deg);-webkit-transform:skew(30deg,10deg);-o-transform:skew(30deg,10deg);
}

效果：

以往我们叠加效果都是用逗号(“，”)隔开，但在transform中使用多个transform-function时却需要有空格隔开。

最后我们再来看一个综合实例：

这里还有其他额一些transform，我们后期再来总结；

转载于:https://www.cnblogs.com/mc67/p/5242603.html

CSS3 2D 转换相关推荐

CSS3 2D转换3D转换
1.transform属性方法 Transform 方法 2.2D转换 translate()方法 .div1 {width: 100px;height: 100px;background: #00f ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
（27）css3 2D转换综合案例—卡包效果
卡包效果实现思路如下: 1.将盒子的尺寸和图片的尺寸宽高度相同. 2.给图片设置绝对定位让他堆叠在盒子里面,相对于父亲,所以父亲设置相对定位,父相子绝. 3.给盒子添加鼠标hover事件,当鼠标移入的 ...
(26) CSS3 2D转换transform
一.transform转换属性作用作用:对元素进行移动.缩放.旋转.拉长或拉伸.配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 属性值:多种转换方法的属性值,可以实 ...
CSS3 Transform变形(2D转换)
Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束. Animation:对元素某个 ...
CSS3：2D转换（基础）
CSS3:2D转换让某个元素改变形状.大小.位置 translate( Xpx,Ypx)-移动(根据左.顶部位置给定的参数,从当前位置移动) 例: rotate(number deg(度数))-旋转 ...
CSS3新选择器，盒子模型，过渡动画transition，2D转换transform
关于css属性选择器常用的有: id选择器(#box),选择id为box的元素类选择器(.one),选择类名为one的所有元素标签选择器(div),选择标签为div的所有元素后代选择器(#box ...
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换案例代码效果图元素变形原点 3D转换 3D转换--案例案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...

CSS3 2D 转换

CSS3 2D 转换相关推荐

最新文章

热门文章