<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2D变换</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#one{
width: 200px;
height: 100px;
background-color: orange;
transition: all 1s linear;
}
#one:hover{
transform: translate(400px,50px);
}
#two{
width: 300px;
height: 200px;
background-color: greenyellow;
}
/*缩放测试*/
#three{
width: 200px;
height: 100px;
background-color: sandybrown;
transform:translateX(300px);
transition: all 1s linear;
}
#three:hover{
/*不能不写transfromX(300px),要不然回归原位， 不能在原位进行缩放*/
transform: translateX(300px) scale(2);
}
/*倾斜测试*/
#four{
transform:translateX(300px) skewY(10deg);
}
/*旋转测试*/
#five{
animation: changeRotate 2s infinite linear;
/*修改坐标系原点*/
transform-origin:center center;
}
.six{
width: 600px;
height: 600px;
background-color: red;
border-radius: 300px;
}
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid green;
border-bottom: 50px solid transparent;
}
@keyframes changeRotate{
0%{
transform: rotate(0deg);
}
20%{
transform: rotate(60deg);
}
40%{
transform: rotate(120deg);
}
60%{
transform: rotate(140deg);
}
80%{
transform: rotate(160deg);
}
}
</style>
</head>
<body>
<!--1、平移属性
transform:translateX(20px);
..........:transfromY(20px);
..........:transform(x,y);
-->
<div id="one"></div>
<div id="two"></div>
<!--2、缩放
transfrom:scaleX();
transfrom:scaleY();
transfrom:scale(倍数)；
或者scale(x,y);
填写的是缩放倍数，没有单位！
-->
<div id="three"></div>
<!--3、倾斜
单位：角度 deg
注意 ：X轴和y轴是相反的
transfrom ；skewX()沿着X轴倾斜
skewY()沿着Y轴倾斜
skew(X,Y)同是沿着X、Y轴倾斜
竖直的是X轴，水平的是Y轴。
X轴正值逆时针旋转，负值顺时针旋转。
Y轴正值顺时针旋转，负值逆时针旋转。
-->
<img id="four" src="img/暖暖.jpg" />
<!--4、旋转 rotate
rotateX（）沿着X轴旋转
rotateY（）沿着Y轴旋转
rotateZ()沿着Z轴旋转 等同于rotate
-->
<img id="five" style="width: 600px;" src="img/忘记你小图.jpg"/>
<div class="six">
<div class="triangle-right">
</div>
</div>
</body>
</html>
<!--
2D变换是针对于 标签的坐标轴（x,y)!
元素变换:transform
有四个属性值：
1、平移 translate
2、缩放 scale
3、倾斜 skew
4、旋转 rotate
2D变换参考的坐标系是平面坐标系，该坐标秀由X轴和Y轴组成
注意：
a、每一个元素都有自己的坐标系，元素设置transform 影响的是自己的坐标系，不会影响其他标签 ，所以，修改transform属性不会影响盒模型大小，从而不会影响网页布局
b、一旦元素的坐标轴被影响，那么之后的所有操作都是按照已经被影响的坐标轴为参考进行变换的
c、设置样式时，系统是按照书写顺序依次去影响坐标轴的
-->
网友评论