<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
</html>
#div1{
width: 200px;
height: 150px;
background:pink;
perspective: 900px;/*为子元素定义3D效果*/
}
#div2{
width: 200px;
height: 150px;
background:orange;
}
#div2:hover{
/*transform: translate(50px,1em);*//*右下平移*/
/*transform: translate(2em);*//*右平移*/
/*transform: translate(-50px);*//*左平移*/
/*transform: translate(0,-50px);*//*上平移*/
/*transform: translateX(60px);*/
/*transform: translateY(40px);*/
/*transform: none;*//*不偏移*/
/*transform: scale(0.5,0.5);*//*小于1为缩小*/
/*transform: scale(1.5);*//*大于1为放大。当只有一个值时为x轴y轴同时缩放同样大小倍数*/
/*transform: scaleX(0.9);*/
/*transform: scaleY(0.7);*/
/*transform: rotate(30deg);*//*单位角度。正值顺时针旋转，负值逆时针旋转。*/
/*transform: rotate(0.2rad);*//*单位弧度*/
/*transform: skewX(30deg);*//*倾斜*/
/*transform: skewY(30deg);*/
/*transform: skew(30deg,30deg);*/
/*transform: matrix(1,0,0.5,1,0,0);*//*第1个参数x轴缩放，第2个参数y轴倾斜，第3个参数x轴倾斜，第4个参数y轴缩放，第5个参数x轴平移，第6个参数y轴平移*/
/*transform: scale(0.5,0.5) rotate(30deg);*/
/*transform-origin: left top;*//*像素/百分比，x轴left、right、center，y轴top、bottom、center*/
/*transform-origin: 0 75px;*/
/*transform-origin: 50% 0;*/
/*transform: rotate(0.3rad);*/
/*transform: rotate(30deg);*/
/*transform: translate3d(0,0,-200px);*//*z轴参数为正则靠近，为负则远离*/
/*transform: translateZ(-300px);*/
/*transform: rotate3d(1,0,0,30deg);*//*绕x轴旋转*/
/*transform: rotate3d(0,1,0,30deg);*//*绕y轴旋转*/
/*transform: rotate3d(0,0,1,30deg);*//*绕z轴旋转*/
transform: rotate3d(1,1,1,30deg);/*绕xyz轴旋转*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li class="li1">HTML5</li>
<li class="li1">CSS3</li>
<li class="li1">JavaScript</li>
<li class="li1">jQuery</li>
</ul>
<hr>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
</html>
li{
list-style: none;
background:linear-gradient(to left,orange,pink);
margin: 10px;
padding: 10px;
width: 90px;
border-radius: 5px;
text-shadow: rgba();
}
.li1{
float: left;
}
hr{
clear: left;
border:2px dotted blue;
}
li:hover{
background:linear-gradient(to right,orange,pink);
transform-origin: left top;
transform: rotate(10deg);
}
过渡：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
div{
width: 300px;
height: 200px;
background-color: red;
}
div:hover{
width: 150px;
height: 100px;
background-color: blue;
transition-property: all;
/*transition-property: background-color;*/
transition-duration: 1s;
/*transition-timing-function: ease;*//*先慢后快*/
transition-timing-function: linear;/*匀速*/
transition-delay: 1s;/*默认0无延时*/
}