CSS transform:rotate();怎么设置旋转方向？比如向左上角旋转和以自身为中心放大
CSStransform:rotate();怎么设置旋转方向？比如向左上角旋转和以自身为中心放大。...
CSS transform:rotate();怎么设置旋转方向？比如向左上角旋转和以自身为中心放大。
展开
2个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>
</head>
<body>
<div class="stage">
<div class="box clockwise"></div>
<div class="box anticlockwise"></div>
<div class="box zoom"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
