旋转效果
2020-03-03 本文已影响0人
小雪洁
-
tranform:rotateZ()实现平面旋转，或者直接tranform:rotate()； - 给要旋转的元素加上
transition:1s更清晰看出旋转效果； - 要旋转的元素应该是块元素，如果是内联元素，将其设为块元素；
<html>
<head>
<meta charset="utf-8">
<title>旋转</title>
</head>
<style>
main{
width:200px;
height: 200px;
position: absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
border: solid #CCCCCC 2px;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
/* transform:perspective(900px) rotateY(-45deg); */
}
main div{
width:100px;
height: 100px;
background: pink;
transition:1s;/*注意给被转的对象加上过渡可以更清晰看出旋转效果*/
}
main:hover div{
transform: perspective(900px) rotate(-260deg);
/* 下行代码和上行代码实现的效果一样，即rotateZ()实现平面的旋转 */
/*transform: perspective(900px) rotateZ(-260deg); */
}
</style>
<body>
<main>
<div></div>
</main>
</body>
</html>
