transform-rotate旋转
2018-04-26 本文已影响0人
琪33
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
margin:100px auto;
transition:all 1s;
color:#fff;
font-size:50px;
}
/* rotate（角度） 旋转
正值 顺时针
赋值：逆时针
*/
.box:hover{
transform:rotate(-945deg);
}
.out{
width: 300px;
height: 150px;
background-color: pink;
margin-top:200px;
position: relative;
}
.out::before{
content:"";
position: absolute;
width: 50px;
height: 50px;
background-color: pink;
transform:rotate(45deg);
left:40%;
top:-15px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="out">
</div>
</body>
