CSS3 转换（1）：2D

知识点：
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案例
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案例
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案例
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坐标重新定位元素。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3transform属性详解
    Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭...
    hzrWeber阅读 22,213评论 0赞 19
  • transfrom简单介绍
    Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭...
    mypger阅读 8,094评论 0赞 2
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 6,857评论 0赞 11
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 5,865评论 0赞 2
  • CSS3 transform介绍
    CSS里transform变形这个属性有点学习难度，尤其在CSS3里加上了3D效果之后，2维变3维学习成本更是成倍...
    张歆琳阅读 28,226评论 5赞 81

友情链接更多精彩内容