CSS3的元素变形

Author: 刘老师(Aaron Lau) 武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!

CSS3的元素变形

课程概要

  1. 变形-旋转 rotate()
  2. 变形-扭曲 skew()
  3. 变形-缩放 scale
  4. 变形-位移 translate
  5. 变形--矩阵 matrix()
  6. 非只读选择器 :read-write

transform 变换/转换/改变 translate 一般译为翻译, 这里的意思是转变, 偏移, 位移

1. 变形-旋转 rotate()

尝试改变角度值

<style>
    .wrapper {
      width: 200px;
      height: 200px;
      border: 1px dotted red;
      margin: 100px auto;
    }
    .wrapper div {
      width: 200px;
      height: 200px;
      background: orange;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
    }
</style>

<div class="wrapper">
    <div></div>
</div>

2. 变形-扭曲 skew()

skew(x,y) 参数为, x轴和y轴, 不写默认为0

skewX(x) X轴扭曲变形

skewY(y) Y轴扭曲变形

<style>
    .wrapper {
        width: 300px;
        height: 100px;
        border: 2px dotted red;
        margin: 30px auto;
    }
    .wrapper div {
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background: orange;
        -webkit-transform: skew(45deg, 10deg);
        -moz-transform:skew(45deg, 10deg)
        transform:skew(45deg, 10deg);
    }
</style>

<div class="wrapper">
    <div>我变成平形四边形</div>
</div>

3. 变形-缩放 scale

<style>
    .wrapper {
        width: 200px;
        height: 200px;
        border:2px dashed red;
        margin: 100px auto;
    }
    .wrapper div {
        width: 200px;
        height: 200px;
        line-height: 200px;
        background: orange;
        text-align: center;
        color: #fff;
    }
    .wrapper div:hover {
        opacity: .5;
        -webkit-transform: scale(1.5);
        -moz-transform:scale(1.5)
        transform: scale(1.5);
    }
</style>

<div class="wrapper">
    <div>我将放大1.5倍</div>
</div>

4. 变形-位移 translate

其实就是类似于position中的relative。

不影响其他元素

<style>
    .wrapper {
        width: 200px;
        height: 200px;
        border: 2px dotted red;
        margin: 20px auto;
    }
    .wrapper div {
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background: orange;
        color: #fff;
        -webkit-transform: translate(50px,100px);
        -moz-transform:translate(50px,100px);
        transform: translate(70px,100px);
    }
</style>

<div class="wrapper">
    <div>我向右向下移动</div>
</div>

5. 变形--矩阵 matrix()

矩阵十分之复杂, 如果有兴趣, 推荐此文, 猛击这里

<style>
.wrapper {
    width: 300px;
    height: 200px;
    border: 2px dotted red;
    margin: 40px auto;
}
.wrapper div {
    width:300px;
    height: 200px;
    background: orange;
    -webkit-transform: matrix(1,0,0,1,50,50);
    -moz-transform:matrix(1,0,0,1,50,50);
    transform: matrix(1,0,0,1,50,50);
}
</style>
<div class="wrapper">
    <div></div>
</div>

6. 变形--原点 transform-origin

元素的默认原点, 在元素X轴和Y轴的50%处, 也就是在元素的中心.

通过transform-origin, 可以改变元素的原点, 然后再做变形!~

<style>
.wrapper {
    width: 300px;
    height: 300px;
    float: left;
    margin: 100px;
    border: 2px dotted red;
    line-height: 300px;
    text-align: center;
}
.wrapper div {
    background: orange;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.transform-origin div {
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
</style>

<div class="wrapper">
    <div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
    <div>原点重置到左上角</div>
</div>

最后推荐此文, 作者以其独特的视觉, 详细讲解了CSS3中的变换, 希望对大家有帮助.

猛击这里

上一篇课程 下一篇课程

学生登录