CSS3 转换（1）：2D

作者: 越IT | 来源:发表于2017-01-15 22:53 被阅读29次

CSS3 2D转换
CSS3 2D<===>3D转换
CSS3 转换（1）：2D
CSS3中2D和3D的转换
学习笔记-CSS-2017.2.17
CSS3 2D转换、3D转换
css动画
网络编程(六）之CSS3 2D/3D及动画
css扩展/CSS3
CSS3总结

知识点：
CSS3 Transform
CSS3 2D转换
CSS3 3D转换
CSS3 Transform与坐标系统
CSS3 矩阵
CSS3 扩展属性

一、CSS3 Transform

CSS3的变形（Transform）属性

让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。
【语法】

transform：none | <transform-function> [<transform-function> ]*;

【默认值】
transform:none;
【兼容性】
IE12+、FireFox16+、chrome36+、Safari16+、Opera23+

二、CSS3 2D转换

CSS3 rotate()
CSS3 translate()
CSS3 scale()
CSS3 skew()
CSS3 matrix()

1.旋转rotate

通过制定的角度参数对原元素制定一个2D rotate（2D旋转）。
【语法】

transform:rotate(<angle>);

【参数说明】
angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。

rotate案例：

rotate

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style type="text/css">
* { margin: 0; padding: 0; list-style-type: none; }
a,
img { border: 0; }
body { font: 12px/180% Arial; }
.main { width: 1000px; margin: 50px auto; position: relative; }
.pic { width: 300px; height: 290px; border: 1px solid #ccc; background: #fff; box-shadow: 2px 2px 3px #aaa; }
.pic img { margin: 10px 0 0 8px; width: 285px; }
.pic p { text-align: center; font-size: 20px; }
.pic1 {
    -webkit-transform: rotate(7deg);
       -moz-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
         -o-transform: rotate(7deg);
            transform: rotate(7deg);
}
.pic2 {
    -webkit-transform: rotate(-8deg);
       -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
         -o-transform: rotate(-8deg);
            transform: rotate(-8deg);
}
.pic3 { position: absolute; top: 40px; left: 350px; z-index: 2;
    -webkit-transform: rotate(-35deg);
       -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
         -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
}
.pic4 { position: absolute; top: 360px; left: 350px; z-index: 3;
    -webkit-transform: rotate(35deg);
       -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
         -o-transform: rotate(35deg);
            transform: rotate(35deg);
}
.pic5 { position: absolute; top: 150px; left: 600px; z-index: 4;
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}
.pic6 { position: absolute; top: 180px; left: 280px; z-index: 5;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="main">
    <div class="pic pic1">![](images/1.jpg)<p>2D转换</p></div>
    <div class="pic pic2">![](images/2.jpg)<p>2D转换</p></div>
    <div class="pic pic3">![](images/3.jpg)<p>2D转换</p></div>
    <div class="pic pic4">![](images/4.jpg)<p>2D转换</p></div>
    <div class="pic pic5">![](images/5.jpg)<p>2D转换</p></div>
    <div class="pic pic6">![](images/6.jpg)<p>2D转换</p></div>
</div>
</body>
</html>

2.移动translate

translate()方法，根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。

【三种情况】
translateX(x)仅水平方向移动（X轴移动）;
translateY(Y)仅垂直方向移动（Y轴移动）;
translate(x, y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。

1).translateX(<translation-value>)

通过给定一个X方向上的数目指定一个translation。
【语法】

transform:translateX(<translation-value>);

2).transform:translateY(<translation-value>);

通过给定一个Y方向上的数目指定一个translation。
【语法】

transform:translateY(<translation-value>);

【备注】

deg是角度；
translate-value必须是准确的数值，top类方向词无效果；
X轴的正方向是从左到右，Y轴正方向是从上到下。

3).translate(<translation-value>[, <translation-value>])

通过矢量[tx, ty]指定一个2D translation, tx是第一个过渡值参数, ty是第二个过渡值参数选项。
【语法】

transform: translate(<translation-value>[, <translation-value>])

translate案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: translate(200px, 100px);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

【备注】：

第一个是X的值，第二个Y的值可以省略，默认值为0。

3.缩放scale

scale()方法，指定对象的2D scale（2D缩放）。

【三种情况】
scaleX(x)元素仅水平方向缩放（X轴缩放）;
scaleY(y)元素仅垂直方向缩放（Y轴缩放）;
scale(x, y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。

1).scaleX(<number>)

使用[sx, 1] 缩放矢量执行缩放操作，sx为所需参数。

【语法】

transform: scaleX(<number>);

scaleX案例：

scaleX案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scaleX(.5);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

2).scaleY(<number>)

使用[sy, 1] 缩放矢量执行缩放操作，sy为所需参数。

【语法】

transform: scaleY(<number>);

scaleY案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scaleX(.5);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

3).scale(<number>[, <number>])

提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。

【语法】

transform: scale(<number>[, <number>]);

【备注】

以中心缩放；
1是正常大小，小于1是缩小，大于1是放大；不需要单位。
注意：第二个参数省略了并非是0 ，而是等同第一个参数。即等比例，不变形。

4.扭曲skew

skew()方法，指定对象skew transformation（斜切扭曲）。
【三种情况】
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）;
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）;
skew(x, y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。

1).skewX(<angle>)

按给定的角度沿X轴指定一个skew transformation（斜切变换）。
【语法】

transform: skewX(<angle>);

skewX案例：

skewX案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skewX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: skewX(15deg);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

2).skewY(<angle>)

按给定的角度沿Y轴指定一个skew transformation（斜切变换）。
【语法】

transform: skewY(<angle>);

skewY案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skewY</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: skewY(15deg);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

【备注】：

skewX
正值：逆时针
负值：顺时针

skewY
正值：顺时针
负值：逆时针

其中180deg 和0deg 效果一样

3).skew(<angle> [, <angle>])

X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。
【语法】

transform: skew(<angle> [, <angle>]);

skew(<angle> [, <angle>])案例

skew(<angle> [, <angle>])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skew</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: skew(15deg, 15deg);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

备注：

第二个参数可以省略，当只有一个参数时，默认值是0.

5.矩阵matrix

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换。
相当于直接应用一个[a,b,c,d,e,f]变换矩阵。

【语法】

transform: matrix(a, c, b, d, tx, ty);

【参数说明】
tx, ty就是就是基于X和Y坐标重新定位元素。

网友评论

从零开始学前端

本文标题：CSS3 转换（1）：2D

本文链接：https://www.haomeiwen.com/subject/iejybttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

CSS3 转换（1）：2D

一、CSS3 Transform

CSS3的变形（Transform）属性

二、CSS3 2D转换

1.旋转rotate

rotate案例：

2.移动translate

1).translateX(<translation-value>)

2).transform:translateY(<translation-value>);

3).translate(<translation-value>[, <translation-value>])

translate案例

3.缩放scale

1).scaleX(<number>)

scaleX案例：

2).scaleY(<number>)

scaleY案例

3).scale(<number>[, <number>])

4.扭曲skew

1).skewX(<angle>)

skewX案例：

2).skewY(<angle>)

skewY案例

3).skew(<angle> [, <angle>])

skew(<angle> [, <angle>])案例

5.矩阵matrix

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读