我最喜欢用的css3之2D转换之translate用法

CSS3 2D 转换

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

translate() 方法

通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

实例

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */

直接复制到编辑器就可以出来效果

时间: 2024-10-11 12:40:15

我最喜欢用的css3之2D转换之translate用法的相关文章

css3之2D转换

css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享以下. 这里,我将会介绍到以下转换方法: translate() rotate() scale() skew() 首先,我们先插入一个简单的html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

0061 CSS3 之 2D 转换 rotate

rotate 旋转 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转 rotate 语法.使用步骤: (1)给元素添加转换属性 transform (2)属性值为 rotate(角度), 如 transform:rotate(30deg) 顺时针方向旋转30度 /* 单位是:deg */ transform: rotate(度数) div{ transform: rotate(0deg); } 重点知识点 rotate 里面跟度数,单位是 deg 角度为正时,顺时针,角度为负时,逆时针 默

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一

CSS笔记(十二)CSS3之2D和3D转换

参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素. translateX(n) 定义 2D 转换,沿着 X 轴移动元素. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素. scale(x,y) 定义 2D 缩放转换,改

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:

Css3之高级-5 Css转换(简介、2D转换、3D转换)

一.转换简介 转换概述 - 转换是使元素改变形状.尺寸和位置的一种效果 - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化,改变其形状.尺寸和位置 - 3D 转换:元素还可以在 Z 轴上发生变化 转换属性 - transform 属性向元素应用 2D 或者 3D 转换 - 指定一组转换函数,取值 - transform: none/transform-function; - none - 默认值

CSS3 2D 转换【旋转transform:rotate(30deg); 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】

CSS3 2D 转换 CSS3 转换 CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素. 它是如何工作? 变换的效果,让某个元素改变形状,大小和位置. 您可以转换您使用2D或3D元素. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Property           transform 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5

css3 字体、2D转换、3D转换

学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. @font-face { font-family: myFonts;//定义字体名称 src: url(myFonts.ttf), url(myFonts.eot), url(myFonts.otf);//字体文件来源 可选.ttf..eot..otf等三种格式文件 } PS:为了兼容不同浏览器最好

css3的2D变形

一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二.具体体现的例子 1.位移的实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo