第十讲_css2d转换

css2d转换

  • 1. 移动
  • 2. 旋转
  • 3. 缩放
  • 4. 组合转换
  • 5. 设置原点

1. 移动

translate() :参照元素原位置,在X轴和Y轴方向上移动。

<html>
  <style>
    .container1:hover {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 在X轴方向移动50px */
      transform: translateX(50px);
    }
    .container1 {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .container2:hover {
      width: 200px;
      height: 200px;
      background-color: green;
      /* 在Y轴方向移动50px */
      transform: translateY(50px);
    }
    .container2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .container3:hover {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 在Y轴方向移动50px */
      transform: translate(50px, 50px);
    }
    .container3 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  style>

  <div class="container1">div>
  <div class="container2">div>
  <div class="container3">div>
html>

在设置移动量时,除了用像素外,还可以使用百分比。X轴上的百分比是相对于了自身元素的宽,Y轴上的百分比是相对于自身元素的高。

2. 旋转

rotateZ():根据指定角度旋转元素。2D旋转就是绕着Z轴旋转。

<html>
  <style>
    .container1:hover {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 旋转20deg */
      transform: rotateZ(20deg)
    }
    .container1 {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  style>

  <div class="container1">div>
html>

3. 缩放

scale() :根据指定的倍数在X轴和Y轴缩放元素。

<html>
  <style>
    .container1:hover {
      width: 200px;
      height: 200px;
      background-color: red;
      /* X轴上缩小为原来的0.5倍 */
      transform: scaleX(0.5)
    }
    .container1 {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .container2:hover {
      width: 200px;
      height: 200px;
      background-color: green;
      /* Y轴上缩小为原来的0.5倍 */
      transform: scaleY(0.5)
    }
    .container2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .container3:hover {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 在X轴和Y轴上放大为原来的1.5倍 */
      transform: scale(1.5, 1.5)
    }
    .container3 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  style>

  <div class="container1">div>
  <div class="container2">div>
  <div class="container3">div>
html>

4. 组合转换

<html>
  <style>
    .container1:hover {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 先移动,再旋转*/
      /* 注意:旋转后坐标系也会旋转  */
      transform: translate(50px, 50px) rotateZ(30deg);
    }
    .container1 {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  style>

  <div class="container1">div>
html>

5. 设置原点

上述的变化都是基于默认的原点,默认的原点是元素的中心点。
transform-origin 设置原点在X轴的位置和Y轴的位置。

<html>
  <style>
    .container1:hover {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 旋转20deg */
      transform: rotateZ(20deg);
      /* 设置原点在元素的左上角,元素绕着左上角旋转 */
      transform-origin: left top;
    }
    .container1 {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .container2:hover {
      width: 200px;
      height: 200px;
      background-color: green;
      /* 旋转20deg */
      transform: rotateZ(20deg);
      /* 设置原点在元素的左下角 */
      transform-origin: 0 200px;
    }
    .container2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .container3:hover {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 旋转20deg */
      transform: rotateZ(20deg);
      /* 设置原点在元素的中心点,也是默认值 */
      transform-origin: 50% 50%;
    }
    .container3 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  style>

  <div class="container1">div>
  <div class="container2">div>
  <div class="container3">div>
html>

ps:上述所有代码执行后,需要鼠标悬停在元素上查看转换的效果。

你可能感兴趣的:(CSS样式,css,前端,css3,html)