CSS transform 属性 实现矩形旋转

目录

一、定义和用法

二、浮动效果

三、实现拖拽

---

一、定义和用法

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

为了更好地理解 transform 属性，请查看这个演示。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transform="rotate(7deg)"

语法

transform: none|transform-functions;

值	描述
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 转换元素定义透视视图。

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

二、浮动效果

<template>
  <div class="container">
    <ul class="box">
      <li class="box-back">
        <img :src="img1" />
      </li>
      <li class="box-right">
        <img :src="img2" />
      </li>
      <li class="box-left">
        <img :src="img3" />
      </li>
      <li class="box-bottom">
        <img :src="img4" />
      </li>
      <li class="box-top">
        <img :src="img5" />
      </li>
      <li class="box-front">
        <img :src="img6" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "transform",
  data() {
    return {
      img1: require("@/assets/image/1.webp"),
      img2: require("@/assets/image/2.webp"),
      img3: require("@/assets/image/3.webp"),
      img4: require("@/assets/image/4.webp"),
      img5: require("@/assets/image/5.webp"),
      img6: require("@/assets/image/6.webp"),
    };
  },
  props: {},
  methods: {},
  computed: {},
  mounted() {
    window.onload = function () {
      let Box = document.querySelector(".box");
      let y = -60;
      let x = 45;
      Box.onmousedown = function (ev) {
        let oEvent = ev || event;
        let disX = oEvent.clientX - y;
        let disY = oEvent.clientY - x;
        document.onmousemove = function (ev) {
          let oEvent = ev || event;
          x = oEvent.clientY - disY;
          y = oEvent.clientX - disX;
          Box.style.transform =
            "perspective(800px) rotateX(" + x + "deg) rotateY(" + y + "deg)";
        };
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    };
  },
};
</script>

<style  scoped>
.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 50px;
  text-align: center;
  background-color: rgb(218, 218, 218);
}
.box {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 300px auto;
  transform-style: preserve-3d;
  animation: change 30s linear infinite;
}
li {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.9;
  list-style: none;
  border-radius: 25px;
  position: absolute;
  transition: all 1s;
  border: 1px solid black;
  font-size: 40px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgb(255, 81, 0);
}
ul img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
}
.box-back {
  transform: translateZ(-150px);
}
.box-right {
  transform: translate(150px) rotateY(90deg);
}
.box-left {
  transform: translate(-150px) rotateY(-90deg);
}
.box-bottom {
  transform: translateY(150px) rotateX(-90deg);
  /* transform-origin: bottom; */
}
.box-top {
  transform: translateY(-150px) rotateX(90deg);
}
.box-front {
  transform: translateZ(150px);
}

.box:hover .box-back {
  transform: translateZ(-220px);
}
.box:hover .box-right {
  transform: translate(220px) rotateY(90deg);
}
.box:hover .box-left {
  transform: translate(-220px) rotateY(-90deg);
}
.box:hover .box-bottom {
  transform: translateY(220px) rotateX(-90deg);
}
.box:hover .box-top {
  transform: translateY(-220px) rotateX(90deg);
}
.box:hover .box-front {
  transform: translateZ(220px);
}

@keyframes change {
  from {
    transform: rotateY(360deg) rotateX(720deg) rotateZ(-720deg);
  }
  to {
    transform: rotateY(-360deg) rotateX(-720deg) rotateZ(720deg);
  }
}
</style>

三、实现拖拽

<template>
  <div class="container">
    <ul class="box">
      <li class="box-back">
        <img :src="img1" />
      </li>
      <li class="box-right">
        <img :src="img2" />
      </li>
      <li class="box-left">
        <img :src="img3" />
      </li>
      <li class="box-bottom">
        <img :src="img4" />
      </li>
      <li class="box-top">
        <img :src="img5" />
      </li>
      <li class="box-front">
        <img :src="img6" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "transform",
  data() {
    return {
      img1: require("@/assets/image/1.webp"),
      img2: require("@/assets/image/2.webp"),
      img3: require("@/assets/image/3.webp"),
      img4: require("@/assets/image/4.webp"),
      img5: require("@/assets/image/5.webp"),
      img6: require("@/assets/image/6.webp"),
    };
  },
  props: {},
  methods: {},
  computed: {},
  mounted() {
    window.onload = function () {
      let Box = document.querySelector(".box");
      let y = -60;
      let x = 45;
      Box.onmousedown = function (ev) {
        let oEvent = ev || event;
        let disX = oEvent.clientX - y;
        let disY = oEvent.clientY - x;
        document.onmousemove = function (ev) {
          let oEvent = ev || event;
          x = oEvent.clientY - disY;
          y = oEvent.clientX - disX;
          Box.style.transform =
            "perspective(800px) rotateX(" + x + "deg) rotateY(" + y + "deg)";
        };
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    };
  },
};
</script>

<style  scoped>
.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 50px;
  text-align: center;
  background-color: rgb(218, 218, 218);
}
.box {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 300px auto;
  transform-style: preserve-3d;
  animation: change 30s linear infinite;
}
li {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.9;
  list-style: none;
  border-radius: 25px;
  position: absolute;
  transition: all 1s;
  border: 1px solid black;
  font-size: 40px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgb(255, 81, 0);
}
ul img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
}
.box-back {
  transform: translateZ(-150px);
}
.box-right {
  transform: translate(150px) rotateY(90deg);
}
.box-left {
  transform: translate(-150px) rotateY(-90deg);
}
.box-bottom {
  transform: translateY(150px) rotateX(-90deg);
  /* transform-origin: bottom; */
}
.box-top {
  transform: translateY(-150px) rotateX(90deg);
}
.box-front {
  transform: translateZ(150px);
}

/* .box:hover .box-back {
  transform: translateZ(-220px);
}
.box:hover .box-right {
  transform: translate(220px) rotateY(90deg);
}
.box:hover .box-left {
  transform: translate(-220px) rotateY(-90deg);
}
.box:hover .box-bottom {
  transform: translateY(220px) rotateX(-90deg);
}
.box:hover .box-top {
  transform: translateY(-220px) rotateX(90deg);
}
.box:hover .box-front {
  transform: translateZ(220px);
}

@keyframes change {
  from {
    transform: rotateY(360deg) rotateX(720deg) rotateZ(-720deg);
  }
  to {
    transform: rotateY(-360deg) rotateX(-720deg) rotateZ(720deg);
  }
} */
</style>