第98天:变换transform详解

变换transform详解

变换函数

translateX(x):在水平方向移动元素,正值向右移动。

translateY(y):在垂直方向移动元素,正值向下移动。

translate(x,y):在水平和垂直方向移动元素。

scaleX(x):在水平方向缩放元素(1.0是原始大小)。使用负值会将元素绕y轴翻转,创建一个从右到左的镜像。

scaleY(y):在垂直方向缩放元素(1.0是原始大小)。使用负值会将元素绕x轴翻转,创建一个从下到上的镜像。

scale(x,y):在水平和垂直方向缩放元素。

rotate(angle):围绕元素中心顺时针旋转。用负值则逆时针旋转。

skewX(angle):在水平方向倾斜元素。上下边缘仍然水平,左右边缘倾斜。

skewY(angle):在垂直方向倾斜元素。左右边缘不倾斜,上下边缘倾斜。

skew(x-angle,y-angle):在水平和垂直方向倾斜。

matrix(n1,n2,n3,n4,n5,n6):用矩阵乘法来变换元素(其他所有的变换都可以使用矩阵乘法来实现)。

2,变换

变换是一个强大的工具,可以移动、缩放、斜切和旋转元素,扭曲它的外观。要用 transform 属性即可实现变换。

(变换不会影响页面中的其他元素,也不会影响布局。比如通过变换放大某个元素,那么该元素会简单地覆盖相邻元素)

原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/detail_987.html

时间: 2024-10-20 14:49:51

第98天:变换transform详解的相关文章

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数"角度",单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度. 二.缩放 scale 用法:transform

CSS3动画特效——transform详解

CSS3动画特效——transform详解 公共css .common{ width:100px; height:100px; margin:20px auto; background-color:#75C934; text-align:center; line-height:100px; font-size:18px; } 1)transform:rotate(value); 元素旋转 value为旋转度数 默认顺时针旋转. value若为负值则逆时针旋转. .box{ /*过渡效果*/ -w

iOS开发——UI篇OC&transform详解

transframe属性详解 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置”的形变 CGAffineTransformMakeTranslation(平移) CGAffineTransformMakeScale(缩放) CGAffineTransformMakeRotation(旋转) (2) 创建“基于transform参数”的形变 CGAffineTra

(转)View Transform(视图变换)详解

原文作者讲得太好了,唯有这篇让我对视图矩阵了解的清晰了很多. ---------------------------------------------------------------------------- 什么是View Transform 我们可以用照相机的原理来阐释3D图形的绘制过程,想象一下,我们在摄影的时候都需要做哪些工作,大致可分为如下几个步骤 摆放好待拍摄的物品,或者人物. 调整好拍摄角度. 调整焦距. 拍摄. 好了,来分析一下,上面的第一步就相当于世界变换了,将一个模型置

css3变换效果详解

1.浏览器支持情况 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换). Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换). Opera 只支持 2D 转换 2.transform属性 值 描述 测试 none 定义不进行转换. 测试 matrix(n,n,n,n,n,n) 定

transform详解

1.简介 该算法用于实行容器元素的变换操作.有如下两个使用原型,一个将迭代器区间[first,last)中元素,执行一元函数对象op操作,交换后的结果放在[result,result+(last-first))区间中.另一个将迭代器区间[first1,last1)的元素*i,依次与[first2,first2+(last-first))的元素*j,执行二元函数操作binary_op(*i,*j),交换结果放在[result,result+(last1-first1)). 2.函数原型 1 tem

[HTML5+CSS3]Transform详解

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧. 语法: transform : none | <transform-function> [ <transform-fun

(转)jdbc:oracle:thin:@192.168.3.98:1521:orcl(详解)

一. jdbc:oracle:thin:@192.168.3.98:1521:orcljdbc:表示采用jdbc方式连接数据库oracle:表示连接的是oracle数据库thin:表示连接时采用thin模式(oracle中有两种模式) jdbc:oralce:thin:是一个jni方式的命名 @表示地址1521和orcl表示端口和数据库名 @192.168.3.98:1521:orcl整个是一块也就是说是这样[jdbc]:[oracle]:[thin]:[@192.168.3.98:1521:o

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度. 二.缩放 scale 用法:transform: scale(0.5)  或者  transform: scale(0.5, 2); 参数表示缩放倍数: 一个参数时:表示水平和