七月十三号CSS3总结《2D的转换》

/*2D的转换*/

位移
-webkit-transform: translate(10px, 10px)
缩放
-webkit-transform: scale(.5, .5)
重置原点
-webkit-transform-origin: 50px 0

旋转: deg表示度数
-webkit-transform: rotate(1rad)

斜切,扭曲
-webkit-transform: skew(1rad, 1rad)

例如:
<div class="out">
<div class="inner"> 测试</div>

</div>
CSS:

.out {
width: 300px;
height: 300px;
background-color: #999999;
padding: 1px;
}

.inner {
margin: 150px;
width: 100px;
height: 100px;
background-color: #21bbca;
-webkit-transform: translate(10px, 10px);

}

时间: 2024-10-21 15:07:25

七月十三号CSS3总结《2D的转换》的相关文章

css3之2D转换

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

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 缩放转换,改

CSS自学笔记(13):CSS3 2D/3D转换

CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transform属性来实现转换效果. 浏览器支持 属性 浏览器支持 2D transform IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera 3D transform IE Firefox Chrome(-webkit-) Safari(-webkit-)

7月13号:2D的转换和过渡,动画效果设置

一.2D的转换通过transform来实现,它有4种方式: 位移:translate(x坐标,y坐标),它是以左上角为原点的位移,不影响其他元素 缩放:scale(X倍数,Y倍数),它是以元素中心为原点进行缩放 旋转:rotate(度数),它是以元素中心为原点进行旋转 斜切(扭曲):skew(X度数,Y度数):X和Y方向同时进行扭曲拉缩 二.过渡是通过transition来实现,它可以同时对元素的多个属性同事定义过渡效果(对象,时间,类型,延迟时间). 过渡的类型主要有以下几种方式 linear

CSS3(3)---2D变形(transform)

CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). 一.2D变形语法 1.移动 (translate) 移动的属性: translate translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动) translateX(x)仅水平方向移动(X轴移动) translateY(Y)仅垂直方向移动(Y轴移动) 比如设置为: tra

七月一号

题记:标题取自游鸿明的<七月一号>,有句歌词是这么写的:七月一号每一年都要买一张车票向回忆投靠... 需求:纪念北漂九年.毕业五年.纪念即将离开第三家公司赶往下一个战场(重点): 九年前,也就是2006年,抱着三个单纯的念想(看雪.奥运会和大草原)来到北方读书,到如今这些都已经实现: 五年前,与其说为了生活走南闯北,不如说为了生计东奔西走,从实习开始去过上海,来过北京,回过厦门,又再次回到北京,继续北漂: 三年前,回到北京来到目前这家公司,三年中有激情澎湃的斗志,有失落迷惘的落单,有追求技术的

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

CSS3的2D与3D转换

2D和3D转换涉及到数学中的知识,作为一个数学专业的毕业生,不研究一下岂不是对不起自己的专业? 首先来看几个参数: 1.transform-origin:origin(起源,起点),也即变形的起点,在数学上可以理解为坐标原点. 其语法为:transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | l

我最喜欢用的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() 方法 通过 tr