CSStransform属性实现矩形旋转⽬录
⼀、定义和⽤法
transform 属性向元素应⽤ 2D 或 3D 转换。该属性允许我们对元素进⾏旋转、缩放、移动或倾斜。
为了更好地理解 transform 属性，请查看这个。
默认值：none
继承性：no
版本：CSS3
JavaScript 语法：ansform="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 转换元素定义透视视图。属性描述
向元素应⽤ 2D 或 3D 转换。
允许你改变被转换元素的位置。
规定被嵌套元素如何在 3D 空间中显⽰。
规定 3D 元素的透视效果。
规定 3D 元素的底部位置。
定义元素在不⾯对屏幕时是否可见。
⼆、浮动效果
<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() {
let Box = document.querySelector(".box");
let y = -60;
let x = 45;
let oEvent = ev || event;
let disX = oEvent.clientX - y;
let disY = oEvent.clientY - x;
let oEvent = ev || event;
x = oEvent.clientY - disY;
y = oEvent.clientX - disX;
ansform =
"perspective(800px) rotateX(" + x + "deg) rotateY(" + y + "deg)"; };
};
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() {
let Box = document.querySelector(".box"); let y = -60;
let x = 45;
let oEvent = ev || event;
let disX = oEvent.clientX - y;
let disY = oEvent.clientY - x;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论