@hzy1123581324/z-view-ui
Version:
z-view-ui是使用vue3开发的组件,开发中,有部分组件功能未实现,慎用
92 lines (89 loc) • 2.69 kB
CSS
/******动画/过渡/转换*********/
.rotate-45{
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}
.rotate-90{
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
}
.rotate-135{
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}
.rotate-180{
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);
}
.rotate-315{
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.rotate-270{
-webkit-transform:rotate(270deg);
-ms-transform:rotate(270deg);
-o-transform:rotate(270deg);
-moz-transform:rotate(270deg);
transform:rotate(270deg);
}
.scale-10{/*10/12*/
-webkit-transform:scale(0.8333);
-ms-transform:scale(0.8333);
-o-transform:scale(0.8333);
-moz-transform:scale(0.8333);
transform:scale(0.8333);
}
.origin-center {/*默认*/
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
.origin-left-top{/*基于左上角*/
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.origin-right-top{/*基于右上角*/
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
/***************过渡*************/
.transit{
-webkit-transition: var(--transition, all .8s ease-in-out 0s);
-ms-transition: var(--transition, all .8s ease-in-out 0s);
-o-transition: var(--transition, all .8s ease-in-out 0s);
-moz-transition: var(--transition, all .8s ease-in-out 0s);
transition: var(--transition, all .8s ease-in-out 0s);
}