css一段旋转效果代码
2019-08-02 本文已影响0人
nickNic
屏幕快照 2019-08-02 下午4.36.27.png
屏幕快照 2019-08-02 下午4.36.34.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
ul{
margin-top: 200px;
text-align: center;
background: red;
height: 500px;
text-align: center;
}
li{
width: 100px;
height: 200px;
display: inline-block;
line-height: 200px;
margin-top: 150px;
transition: transform 0.8s;
position: relative;
}
ul li:nth-child(1){
transform: rotateZ(30deg);
background-color: yellow;
}
ul li:nth-child(2){
transform: rotateZ(-30deg);
background-color: green;
}
ul li:nth-child(3){
transform: rotateZ(10deg);
background-color: gold;
}
ul li:nth-child(4){
transform: rotateZ(40deg);
background-color: blue;
}
ul li:hover{
transform: scale(2.0,2.0);
z-index: 100;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
