矩形旋转"/>
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>
更多推荐
CSS transform 属性 实现矩形旋转
发布评论