transform实例

transform

1，定义：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

2，浏览器支持：

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

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

3，值以及值的定义：

 

none 定义不进行转换。  
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。  
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。  
translate(x,y) 定义 2D 转换。  
translate3d(x,y,z) 定义 3D 转换。  
translateX(x) 定义转换，只是用 X 轴的值。  
translateY(y) 定义转换，只是用 Y 轴的值。  
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。  
scale(x,y) 定义 2D 缩放转换。  
scale3d(x,y,z) 定义 3D 缩放转换。  
scaleX(x) 通过设置 X 轴的值来定义缩放转换。  
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。  
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle) 定义 2D 旋转，在参数中规定角度。  
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿着 X 轴的 3D 旋转。  
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。  
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。  
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。  
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。  
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。  
perspective(n) 为 3D 转换元素定义透视视图。  


4，实例：

1，变换函数

translateX(x)：在水平方向移动元素，正值向右移动。
translateY(y)：在垂直方向移动元素，正值向下移动。
translate(x,y)：在水平和垂直方向移动元素。
 
scaleX(x)：在水平方向缩放元素（1.0是原始大小）。使用负值会将元素绕y轴翻转，创建一个从右到左的镜像。
scaleY(y)：在垂直方向缩放元素（1.0是原始大小）。使用负值会将元素绕x轴翻转，创建一个从下到上的镜像。
scale(x,y)：在水平和垂直方向缩放元素。
 
rotate(angle)：围绕元素中心顺时针旋转。用负值则逆时针旋转。
 
skewX(angle)：在水平方向倾斜元素。上下边缘仍然水平，左右边缘倾斜。
skewY(angle)：在垂直方向倾斜元素。左右边缘不倾斜，上下边缘倾斜。
skew(x-angle,y-angle)：在水平和垂直方向倾斜。
 
matrix(n1,n2,n3,n4,n5,n6)：用矩阵乘法来变换元素（其他所有的变换都可以使用矩阵乘法来实现）。
 
2，变换
变换是一个强大的工具，可以移动、缩放、斜切和旋转元素，扭曲它的外观。要用 transform 属性即可实现变换。
（变换不会影响页面中的其他元素，也不会影响布局。比如通过变换放大某个元素，那么该元素会简单地覆盖相邻元素）
以如下图片为例：
原文:CSS3 - 变换（Transform）的使用，以及变换的过渡
 
（1）旋转元素及其内容
下面使用rotate()函数把元素围绕其中心点旋转了20度。
原文:CSS3 - 变换（Transform）的使用，以及变换的过渡
1
2
3
4
5
6
7
8
9
<style>
.rotatedElement {
    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}
</style>
 
<img src="logo5.png" class="rotatedElement"/>

（2）连续使用多种变换效果

下面先把元素变成原来的1.2倍，再向右移动30个像素，然后又斜切了-15度。
原文:CSS3 - 变换（Transform）的使用，以及变换的过渡
1
2
3
4
5
.rotatedElement {
    transform: scale(1.2) translateX(30px) skew(-15deg);
    -ms-transform: scale(1.2) translateX(30px) skew(-15deg);
    -webkit-transform: scale(1.2) translateX(30px) skew(-15deg);
}

（3）修改默认参照点。
一般变换是以元素的中心点为参照点的。可以通过在应用变换前用 transform-origin 属性来移动这个参照点。
比如：

transform-origin: 0% 0%;    表示左上角为参照点
transform-origin: 100% 0%;    表示右上角为参照点
transform-origin: 50% 200%;    表示参照点x坐标是元素水平方向的中间，y坐标是从上边缘向下两倍于元素高度的地方。
下面让元素围绕元素的左上角旋转45度：
1
2
3
4
5
6
7
8
9
.rotatedElement {
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
 
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

（4）移除所有的变换效果

要移除所有的变换效果，可将 transform 属性设置为 none
1
2
3
4
5
.rotatedElement {
    transform: none;
    -ms-transform: none;
    -webkit-transform: none;
}


3，3D变换

除了在二维空间移动元素，CSS3还可以用3D变换在三维空间移动、旋转和弯曲元素。


4，使用变换的过渡

通常变换和过渡是组合使用的。比如下面以一个在线影集为例，当鼠标移动到图片上时，图片会旋转并放大。而鼠标离开时，图片又会收缩并回到原位。这些变换是有过渡效果的。
 

在线演示如下：

原文:CSS3 - 变换（Transform）的使用，以及变换的过渡 原文:CSS3 - 变换（Transform）的使用，以及变换的过渡 原文:CSS3 - 变换（Transform）的使用，以及变换的过渡 原文:CSS3 - 变换（Transform）的使用，以及变换的过渡
 

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html lang="en">
    <head>
    <title>hangge.com</title>
    <style>
        .gallery {
            margin:0px 30px 0px 30px;
            background: #D8EEFE;
            padding: 10px;
        }
 
        .gallery img{
            margin: 5px;
            padding: 5px;
            width: 75px;
            border: solid 1px black;
            background: white;
            transition: all 1s;
            -webkit-transition: all 1s;
        }
 
        .gallery img:hover {
            transform: scale(2.2) rotate(10deg);
            -ms-transform: scale(2.2) rotate(10deg);
            -webkit-transform: scale(2.2) rotate(10deg);
        }
    </style>
</head>
<body style="padding-top:100px">
    <div class="gallery">
        <img src="g1.jpg"/>
        <img src="g2.jpg"/>
        <img src="g3.jpg"/>
        <img src="g4.jpg"/>
    </div>
</body>
</html>

 

posted @ 2018-01-10 19:51  Cclei  阅读(477)  评论(0)    收藏  举报