csss3 2D转换

CSS3 转换

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

它如何工作?

转换是使元素改变形状、尺寸和位置的一种效果。

您可以使用 2D 或 3D 转换来转换您的元素。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 需要前缀 -ms-。

2D 转换

在本章中,您将学到如下 2D 转换方法:

  • 1. translate()
  • 2. rotate()
  • 3. scale()
  • 4. skew()
  • 5. matrix()

1.translate() 方法

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

示例:

  1. div
  2. {
  3. transform: translate(50px,100px);
  4. -ms-transform: translate(50px,100px); /* IE 9 */
  5. -webkit-transform: translate(50px,100px); /* Safari and Chrome */
  6. -o-transform: translate(50px,100px); /* Opera */
  7. -moz-transform: translate(50px,100px); /* Firefox */
  8. }

值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
   <div>
       你好。这是一个 div 元素。
   </div>
   <div id="div2">
       你好。这是一个 div 元素。
   </div>
</body>
</html>

CSS:

div
{
   width:100px;
   height:75px;
   background-color:yellow;
   border:1px solid black;
}
div#div2
{
   transform:translate(50px,100px);
   -ms-transform:translate(50px,100px); /* IE 9 */
   -moz-transform:translate(50px,100px); /* Firefox */
   -webkit-transform:translate(50px,100px); /* Safari and Chrome */
   -o-transform:translate(50px,100px); /* Opera */
}

html一样,css只写改变的样式

2.rotate() 方法

通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

实例

  1. div
  2. {
  3. transform: rotate(30deg);
  4. -ms-transform: rotate(30deg); /* IE 9 */
  5. -webkit-transform: rotate(30deg); /* Safari and Chrome */
  6. -o-transform: rotate(30deg); /* Opera */
  7. -moz-transform: rotate(30deg); /* Firefox */
  8. }

值 rotate(30deg) 把元素顺时针旋转 30 度。
div#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
}

3.scale() 方法

通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

示例代码:

  1. div
  2. {
  3. transform: scale(2,4);
  4. -ms-transform: scale(2,4); /* IE 9 */
  5. -webkit-transform: scale(2,4); /* Safari 和 Chrome */
  6. -o-transform: scale(2,4); /* Opera */
  7. -moz-transform: scale(2,4); /* Firefox */
  8. }

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍
div#div2
{
  margin:100px;
  transform:scale(2,4);
  -ms-transform:scale(2,4); /* IE 9 */
  -moz-transform:scale(2,4); /* Firefox */
  -webkit-transform:scale(2,4); /* Safari and Chrome */
  -o-transform:scale(2,4); /* Opera */
}

4.skew() 方法

通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

示例代码

  1. div
  2. {
  3. transform: skew(30deg,20deg);
  4. -ms-transform: skew(30deg,20deg); /* IE 9 */
  5. -webkit-transform: skew(30deg,20deg);/* Safari and Chrome */
  6. -o-transform: skew(30deg,20deg); /* Opera */
  7. -moz-transform: skew(30deg,20deg); /* Firefox */
  8. }

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

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

5.matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

示例代码

如何使用 matrix 方法将 div 元素旋转 30 度:

  1. div
  2. {
  3. transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  4. -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
  5. -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
  6. -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
  7. -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
  8. }

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 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
时间: 2024-10-21 13:45:35

csss3 2D转换的相关文章

css3之2D转换

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

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:

动画,2D转换,,3D转换怎样运用

动画 @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果. 属性{[email protected] 2animation } 如:@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {b

css3 2d转换

<!DOCTYPE html><html><head> <title>2D转换</title> <style type="text/css"> .box{ width: 400px; height: 400px; margin: 100px auto; position: relative; } img:nth-child(1){ width: 400px; height: 400px; } img:nth-chi

CSS 3学习——transform 2D转换

首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒子发生了变换,该属性的默认值是"border-box",查MDN只有Firefox支持该属性(我试的没效果). CSS 3 中2D转换的实现用到两个属性: 属性 描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 指定变换的基点的位置

【Demo】CSS3 2D转换

2D转换: 2D变换方法: translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } translate值(50px,100px)是从左边元素移动50个像

11.24 2D转换

1 <head> 2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 3 <title>2D转换</title> 4 <meta name="keywords" content="关键字列表" /> 5 <meta name="description"

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

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

2D转换下的zoom和transfor:scale的区别

一.什么是zoom 在我们做项目和查看别人的网页的时候总会看到在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是"变焦",虽然在摄影的领域经常被提到,但是在web的世界里也可以这样理解它的意思,就是改变元素的尺寸,进行等比例的缩放. 在最初的那些尴尬的岁月里,zoom只能被IE浏览器兼容,但是现在能被除了FireFox以外的所有浏览器支持,甚至是移动端浏览器. zoom的值的类型可以是: 1.数值:0~1