day10 CSS3 transform属性之2D转换 交集选择器

通过交集选择器 div#rotate1，将会选择同时满足以下条件的元素：

• 是
  元素

• 具有 id 为 "rotate1"

然后，应用了 transform: rotate(30deg); 样式于满足上述条件的元素。这将使该元素绕其中心点顺时针旋转 30 度。

再比如说这样的代码：

.all {
    width: 200px;
    height: 100px;
    background-color: palevioletred;
    border: 2px solid black;
    
}
.all#matrix1 {
    transform: matrix(1.5, 0.7, 0, 1, 0.5, 0);
}

但若 html 文件中这样定义：

div class="all">
        all
   div id="matrix1">
        matrix1
  div>
div>

会发现 matrix1 并没有像预想的那样发生样式变化。


这是因为 all#matrix1 选择器选择的是必须满足以下所有条件的:

虽然

是一个位于

内部的子元素。尽管它是 all 类的父元素的子元素，但它本身并不属于 all 类。

所以，可以把 html 文件改成：

div class="all">
        all
div>
div class="all" id="matrix1">
        matrix1
div>


用后代选择器写，因为结构不一样，结果会不一样，但也能实现变换效果：

 div class="all">
        allallallallallallallallallallall
        div id="matrix1">
            matrix1
        div>
    div>

.all {
    width: 200px;
    height: 100px;
    background-color: palevioletred;
    border: 2px solid black;
}

*/
.all #matrix1 {
    transform: matrix(1.5, 0.7, 0, 1, 0.5, 0);
}



2D 转换

translate()

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

rotate()

rotate()方法，在一个给定度数顺时针旋转的元素。负值允许，这样是元素逆时针旋转。

scale()

scale()方法，该元素增加或减少的大小，取决于宽度（X 轴）和高度（Y 轴）的参数。

• scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
• scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
• scaleY(n) 定义 2D 缩放转换，改变元素的高度。

skew()

包含两个参数值，分别表示 X 轴和 Y 轴倾斜的角度，如果第二个参数为空，则默认为 0，参数为负表示向相反方向倾斜。

• skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
• skewX(); 表示只在 X 轴 (水平方向) 倾斜。
• skewY(); 表示只在 Y 轴 (垂直方向) 倾斜。

以上几种变换的示例:



div {
    width: 200px;
    height: 100px;
    background-color: palevioletred;
    border: 2px solid black;
}

div#translate1 {
    transform: translate(100px, 10px);

}

div#rotate1 {

    transform: rotate(30deg);

}

div#scale1 {
    transform: scale(1, 2);
}

div#skew1 {
    transform: skew(10deg, 30deg);
}

div>origindiv>
    div id="translate1">
        translate1
    div>
    div id="rotate1">
        rotate1
    div>
    div id="scale1">
        scale1
    div>
    br>
    br>
    br>
    br>
    br>
    div id="skew1">
        skew1
    div>

matrix()

matrix()方法和 2D 变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
即在不变换的情况下是 matrix(1, 0, 0, 1, 0, 0)

• scaleX() (水平缩放)：控制元素水平方向的缩放。如果值为 1，则不进行水平缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
• skewY() (垂直倾斜)：控制元素在垂直方向上的倾斜。
• skewX() (水平倾斜)：控制元素在水平方向上的倾斜。
• scaleY() (垂直缩放)：控制元素垂直方向的缩放。如果值为 1，则不进行垂直缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
• translateX() (水平平移)：控制元素在水平方向上的平移量。
• translateY() (垂直平移)：控制元素在垂直方向上的平移量。

变换示例



.all {
    width: 200px;
    height: 100px;
    background-color: palevioletred;
    border: 2px solid black;
    
}


.all#matrix1 {
    transform: matrix(1.5, 0.7, 0, 1, 0.5, 0);
}

div class="all">
        all
    div>
    div class="all" id="matrix1">
        matrix1
    div>