Liaoyi

外观

本页目录

transform-origin 详解 ​

transform-origin 是做什么的? ​

用于指定变换的原点位置, 默认为center, 所有的 css 变换，都是基于原点进行的，也就是基于transform-origin指定的位置进行的.

通俗的说，就是能够控制动画的方向

参考资料

MDN transform-origin

transform-origin: center;

transform-origin: left;

transform-origin: bottom; 

<template>
  <div class="rounded-xl pb-10 bg-slate-50 bg-grid-slate-100">
    <div class="grid grid-cols-1 md:grid-cols-3 text-slate-500 font-medium">
      <div class="flex flex-col items-center gap-y-1">
        <p class="  text-center ">
          transform-origin: center;
        </p>
        <div class="relative">
          <div class="absolute inset-0 ">
            <img
              class="w-24 h-24 object-cover rounded-lg opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80"
            >
          </div>
          <div class="relative z-10 origin-center rotate-45 ring-1 ring-inset ring-black/10 rounded-lg ">
            <img
              class="w-24 h-24 object-cover rounded-lg shadow-xl"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80"
            >
            <!-- <div class="absolute inset-0  " /> -->
          </div>
        </div>
      </div>

      <div class="flex flex-col items-center gap-y-1">
        <p class="text-center">
          transform-origin: left;
        </p>
        <div class="relative">
          <div class="absolute inset-0">
            <img
              class="w-24 h-24 object-cover rounded-lg opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80"
            >
          </div>
          <div class="relative z-10 origin-top-left rotate-12 ring-1 ring-inset ring-black/10 rounded-lg">
            <img
              class="w-24 h-24 object-cover rounded-lg shadow-xl"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80"
            >
          </div>
        </div>
      </div>

      <div class="flex flex-col items-center gap-y-1">
        <p class="  text-center ">
          transform-origin: bottom;
        </p>
        <div class="relative">
          <div class="absolute inset-0">
            <img
              class="w-24 h-24 object-cover rounded-lg opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80"
            >
          </div>
          <div class="relative z-10 origin-bottom -rotate-12 ">
            <img
              class="w-24 h-24 object-cover rounded-lg shadow-xl"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80"
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

转换原点为中心点 ​

TIP

  • 紫色 ⭕️是transform-origin的默认位置，在 x 轴和 y 轴，都是元素的中心
  • 橘黄色虚线边框 表示原本正方形原本的位置
  • 将鼠标移入背景色为 蓝色 方块，查看效果

<template>
  <div class="container flex_ccc">
    <div class="reference">
      <div class="rect" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 18rem;
  border-radius: 8px;

}

.reference {
  position: relative;
  width: 8.75rem;
  height: 8.75rem;
  border-radius: 8px;
  border: 2px dashed #fd6622;

}

.rect {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8rem;
  height: 8rem;
  margin-top: -64px;
  margin-left: -64px;
  background: linear-gradient(to right, #06b6d4, #3b82f6);
  opacity: 0.9;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.5s;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #b67ff8;
  }

  &:hover {
    transform: rotate(45deg);
  }
}
</style>

<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg
        after:content-[''] after:w-5 after:h-5 after:rounded-50%
        after:absolute  after:-translate-50% after:top-50% after:left-50%
        after:bg-purple
        "
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          hover:scale-150"
        style="transition: transform 0.5s;"
      />
    </div>
  </div>
</template>

转换原点为左上点 ​


<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg"
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          after:content-[''] after:w-5 after:h-5 after:rounded-50%
          after:absolute  after:-top-2 after:-left-2
          after:bg-purple
          hover:rotate-45"
        style="transition: transform 0.5s;transform-origin: left top;"
      />
    </div>
  </div>
</template>

<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg
        after:content-[''] after:w-5 after:h-5 after:rounded-50%
        after:absolute  after:top-0 after:left-0
         after:bg-purple
        "
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          hover:scale-150"
        style="transition: transform 0.5s;transform-origin: left top;"
      />
    </div>
  </div>
</template>

转换原点为右上点 ​

<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg
        after:content-[''] after:w-5 after:h-5 after:rounded-50%
        after:absolute  after:top-0 after:right-0
         after:bg-purple
        "
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          hover:rotate-45"
        style="transition: transform 0.5s;transform-origin: right top;"
      />
    </div>
  </div>
</template>

<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg
        after:content-[''] after:w-5 after:h-5 after:rounded-50%
        after:absolute  after:top-0 after:right-0
         after:bg-purple
        "
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          hover:scale-150"
        style="transition: transform 0.5s;transform-origin: right top;"
      />
    </div>
  </div>
</template>

转换原点为右下点 ​


<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg
        after:content-[''] after:w-5 after:h-5 after:rounded-50%
        after:absolute  after:bottom-0 after:right-0
         after:bg-purple
        "
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          hover:rotate-45"
        style="transition: transform 0.5s;transform-origin: right bottom;"
      />
    </div>
  </div>
</template>

<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg
        after:content-[''] after:w-5 after:h-5 after:rounded-50%
        after:absolute  after:bottom-0 after:right-0
         after:bg-purple
        "
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          hover:scale-150"
        style="transition: transform 0.5s;transform-origin: right bottom;"
      />
    </div>
  </div>
</template>

转换原点为左下点 ​


<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg
        after:content-[''] after:w-5 after:h-5 after:rounded-50%
        after:absolute  after:bottom-0 after:left-0
         after:bg-purple
        "
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          hover:rotate-45"
        style="transition: transform 0.5s;transform-origin: left bottom;"
      />
    </div>
  </div>
</template>

<template>
  <div class="w-full h-72 rounded-lg flex_ccc ">
    <div
      class="
        relative w-35 h-35 border-2
        border-dashed border-orange-500 rounded-lg
        after:content-[''] after:w-5 after:h-5 after:rounded-50%
        after:absolute  after:bottom-0 after:left-0
         after:bg-purple
        "
    >
      <div
        class="
          w-32 h-32 linear-gradient-blue cursor-pointer rounded-lg
          absolute left-50% top-50% -mt-16 -ml-16
          hover:scale-150"
        style="transition: transform 0.5s;transform-origin: left bottom;"
      />
    </div>
  </div>
</template>