<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<style>
body{height:500px; border: 1px solid red;}
div{width:100px; height:100px; background:red; transition: 1s all ease; transform-origin:left top; overflow:hidden; }
body:hover div {transform:translateX(300px) translateY(300px) rotate(45deg);}
</style>
</head>
<body>
<script>
</script>
<div class="">
过渡 transtion:1s 1s all ease;
变换 transform:
位移 transform:translateX(300px) translateY(300px) / translate(100px,200px)
translateX(100px) 正值往右走 负值往左走
translateY(100px) 正值往下走 负值往上走
translate(X轴位移量,Y轴位移量) 中间用逗号隔开
旋转 rotate 当中赋值的是一个旋转角度 如： 45deg 表示正时针旋转45°
rotate(45deg) 正值是顺时针 负值逆时针
缩放 scale 赋值的数值可以是浮点数 如： 1.2 或者 0.3 或者 2
scale() 大于1是放大效果 小于1是缩放效果
变形 skew （斜切） 赋值的是一个旋转角度
skew() Y轴、X轴两个属性
skewY()
skew(30deg,30deg) 第一个值X轴的斜切角度，第二个值Y轴的斜切角度
变换原始点： transform-origin
left
top
right
bottom
center 默认值是center 当设置相应的值后，会按照相应的设置值发生变换
解析顺序： 按照书写顺序执行
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<style>
body{height:500px; border: 1px solid red;}
div{width:100px; height:100px; background:red; transition: 1s all ease; transform-origin:left top; overflow:hidden; }
body:hover div {transform:translateX(300px) translateY(300px) rotate(45deg);}
</style>
</head>
<body>
<script>
</script>
<div class="">
过渡 transtion:1s 1s all ease;
变换 transform:
位移 transform:translateX(300px) translateY(300px) / translate(100px,200px)
translateX(100px) 正值往右走 负值往左走
translateY(100px) 正值往下走 负值往上走
translate(X轴位移量,Y轴位移量) 中间用逗号隔开
旋转 rotate 当中赋值的是一个旋转角度 如： 45deg 表示正时针旋转45°
rotate(45deg) 正值是顺时针 负值逆时针
缩放 scale 赋值的数值可以是浮点数 如： 1.2 或者 0.3 或者 2
scale() 大于1是放大效果 小于1是缩放效果
变形 skew （斜切） 赋值的是一个旋转角度
skew() Y轴、X轴两个属性
skewY()
skew(30deg,30deg) 第一个值X轴的斜切角度，第二个值Y轴的斜切角度
变换原始点： transform-origin
left
top
right
bottom
center 默认值是center 当设置相应的值后，会按照相应的设置值发生变换
解析顺序： 按照书写顺序执行
</div>
</body>
</html>
2786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
