<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
margin: 0 auto;
width: 100px;
height: 400px;
background-color: rgb(233, 13, 13);
/* 要实现旋转需要加过渡看效果 */
transition: all 2s;
}
.box:hover {
transform:rotate(90deg)
/* 90deg是顺时针转 */
/* transform:rotate(-90deg) */
/* -90deg是顺时针转 */
}
</style>
<body>
<div class="box">
</div>
</body>
</html>
定义一个盒子box,加样式,添加过渡看效果,不添加过渡效果会很快实现,无法辨别,
transition 通常和 hover 等事件配合使用。