css3-变形transforms

原创 2015年07月09日 14:04:02

语法

 transform: rotate | scale | skew | translate |matrix;

:以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开

2D

旋转 rotate(deg)//值为正时顺时针,为负时,逆时针

移动translate(x,y)//若第二参数没写,默认为0

       translateX(x)

       translateY(y)

缩放 scale(x,y)//若第二参数没写,则与第一个相同

        scaleX(x)//缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小

        scaleY(y)



扭曲 skew(x,y)/第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度,若第二参数没写,默认为0

       skewX(x)

       skewY(y)


矩阵 matrix,不常用

基点默认为元素的中心点,可以根据transform-origin进行改变基点,只有上面用过transform属性,该属性才能生效(一般在旋转,斜切,缩放中用到)

transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。

其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom

 

1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50%(默认值)

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%


兼容性



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS3 Transitions, Transforms和Animation使用简介与应用展示

CSS3 Transitions, Transforms和Animation使用简介与应用展示 时间:2011-01-22来源:未知 作者:admin 点击: 1895次 内容提要: ...

CSS3 Transitions, Transforms和Animation使用简介与应用展示

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1268 一、前言兼...

CSS3 Transitions, Transforms和Animation使用简介与应用展示

目录索引 1. 话说Transitions这厮 2. 话说Transforms这货 3. 话说Animation这物 4. 更实际综合的效果展示 5. 浏览器支持情况 6. ...

CSS3 Transitions, Transforms和Animation使用简介与应用展示

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似...

CSS3 Transitions, Transforms和Animation使用简介

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似乎有...

关于css3的Transition,Transforms以及动画的一些总结

Transition 首先热一下身,请大家先看一下下面这个例子:演示 当你的鼠标放上去的时候,字体会变大,这个例子的代码如下: Css: #size{ text-align:center...

CSS3 Transitions, Transforms和Animation使用简介与应用展示

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似乎有...

css3变形1.html

CSS3文字变形3D阴影效果

CSS3之2D变形

CSS3之2D变形一直以来,WEB开发工程师只能依赖于图片、Flash和JavaScript实现一些页面外观的修改、变换。现如今当我们站在CSS3这个巨人的肩膀上,想要实现诸如元素的移动、缩放、倾斜和...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)