css中如何确定旋转中心,CSS transform:rotate();怎样设置旋转方向?比如向左上角旋转和以自身为中心放大...

!doctype htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title style /*如果使用的不是webkit浏览器 请将代码中的注释都去掉就可以看到效果*/ @-webkit-keyframes clockwiseRotate{ to { transform:rotate(90deg); } } @-webkit-keyframes anticlockwiseRotate{ to { transform:rotate(-90deg); } } @-webkit-keyframes zoomScale{ to{ transform:scale(1.5); } } .stage{ width:200px; margin:200px auto auto; border-left:1px solid; border-right:1px solid; } .box{ width:100px; height:100px; transform-origin:0 0; } .clockwise{ background-color:purple; -webkit-animation:clockwiseRotate 2s infinite; /* 设置旋转中心为左上角 顺时针旋转90度 */ /*transform-origin:0 0; transform:rotate(90deg);*/ } .anticlockwise{ background-color:orange; -webkit-animation:anticlockwiseRotate 2s infinite; /* 设置旋转中心为左上角 逆时针旋转90度*/ /*transform-origin:0 0; transform:rotate(-90deg);*/ } .zoom{ background-color:green; -webkit-animation:zoomScale 2s infinite; /* 设置放大中心为元素中心 放大1.5倍*/ transform-origin:50% 50%; /*transform:scale(1.5);*/ } /style/headbody div class=stage div class=box clockwise/div div class=box anticlockwise/div div class=box zoom/div /div/body/html

取消

评论