<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
transform 变形（沿着哪个轴去移动）
translate(位移)
translate(200px,100px); X Y
translateX(100px); X
translateY(100px);Y
translateZ(100px); （3d）
scale 宽高大小
scale(2) 宽高
scale(2,1) 宽 高
scaleX(2);
scaleZ (3d)
rotate 旋转 （单位是角度 deg 弧度）
rotateX (3D)
rotateY（3D）
rotateZ (和rotate是等级关系， 正值 （按顺时针旋转） 负值（按逆时针旋转)
skew 斜体
skewX :单位也是角度（deg），正值（向左倾斜）负值（向右倾斜）
skewY
-->
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: 1px solid red;
margin-left: 100px;
margin-top: 100px;
}
.box1{
width: 100px;
height: 100px;
background-color: #0000FF;
transition: 2s;
}
.box:hover .box1{
/* transform: translate(200px,100px); X Y*/
/* transform: translateX(100px); X*/
/* transform: translateY(100px);Y */
/* transform: scale(2);
transform: scale(2,1);
transform: scaleX(2);
transform: scaleY(2);
*/
/* transform: rotateZ(90deg);
transform: rotateX(120deg);
*/
/* transform: skew(70deg,1deg); *//* X轴 Y轴 */
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1.只能给块元素使用，无法给内联样式使用
2.变形操作不会对其他盒子产生影响
3.复合写法：可以同时添加多个变形操作（先执行后一个，在执行前一个）
4.transform-origin：基点的位置
x y z（3d）
值：left right bottom top 向基点靠拢
-->
<style>
article{
width: 900px;
height: 900px;
border: 1px solid;
}
.class_01{
width: 200px;
height: 200px;
background-color: #0000FF;
transition: 2s;
}
.class_01:hover{
transform: scale(0.2);
transform-origin: left top;
}
.class_02{
width: 200px;
height: 200px;
background-color: red;
/* transform: scale(0.2) translate(300px); */
/* transform: rotate(100deg) translate(300px); */
/* transform: skew(20deg) translate(300px); */
}
.class_03{
width: 200px;
height: 200px;
background-color: #008000;
/* transform: translate(300px) scale(0.2); */
/* transform: translate(300px) rotate(100deg); */
/* transform: translate(300px) skew(20deg); */
}
</style>
</head>
<body>
<article>
<div class="class_01">1</div>
<div class="class_02">2</div>
<div class="class_03">3</div>
</article>
</body>
</html>
