<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*--------------------------------2d变换 之 缩放 scale-----------------------------------*/
/*.box .box2:hover{*/
/*background-color: blue;*/
/*/!* transform: css3中用于做变换的属性*/
/*scale:放缩*/
/*取值:大于1 放大 小于1缩小 不能为百分比*/
/*scale(x,y)*/
/*x:水平放缩倍数*/
/*y:垂直方向的放缩倍数*/
/*如果只写一个值就是等比例缩放e*/
/**!/*/
/*transform: scale(-1,-1);*/
/*}*/
/*-------------------------------位移属性-----------------------------------*/
/*.box .box2:hover{*/
/*background-color: pink;*/
/*/!* 过渡*!/*/
/*transition:all 1s;*/
/*/!*变换*!/*/
/*/!* transform:*/
/*translate()*/
/*让盒子发生位移,*/
/*translate(x) :一个值 水平方向位移,竖直方向不变*/
/*tarnslate(x,y): x:水平方向上的位移,y 竖直方向上的位移*/
/*x,y 可以为正也可以为负*/
/*为正:向下 向右移动*/
/*为负:向上 向左移动*/
/**/
/*取值可以为百分比,百分比以自身宽度为参考*/
/**/
/**!/*/
/*transform:translate(50%);*/
/*}*/
/*----------------------------------旋转属性-------------------------------*/
/* transform:
rotate() 旋转
deg:角度
正值:顺时针旋转
负值:逆时针旋转
*/
/*.box .box2:hover{*/
/*transform:rotate(-720deg);*/
/*}*/
</style>
</head>
<body>
</body>
</html>
css3-2d变换 旋转 等属性
最新推荐文章于 2022-10-17 19:26:14 发布