<html>
<head>
<title>css2</title>
<style type="text/css">
div{
width: 200px;
height:200px;
font-size: 65px;
}
/* 1.translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动 */
.translate{
background: red;
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
/*旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转*/
.rotate{
background: blue;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/*skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）*/
.skew{
background: orange;
-webkit-transform: skew(45deg,50deg);
transform:skew(45deg,50deg);
}
/*缩放 scale()函数 让元素根据中心原点对对象进行缩放*/
.scale{
background: green;
-webkit-transform: scale(1.5,0.5);
transform: scale(1.5,0.5);
} /*matrix() 所有 2D 转换方法组合在一起，用来指定一个2D变换，允许您：旋转、缩放、移动以及倾斜元素。是一个矩阵。*/
.matrix{
background: gray;
-webkit-transform: matrix(1,0,0,1,100,100);
transform: matrix(1,0,0,1,100,100);
} /*transform-origin对元素进行原点位置改变*/ /*rotateX元素围绕其 X 轴以给定的度数进行旋转*/
.rotateX{
background: yellow;
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);
} /*rotateY元素围绕其 Y 轴以给定的度数进行旋转*/
.rotateY{
background: pink;
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);
} /*transition属性是一个复合属性，主要包括以下几个子属性：
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
*/
.transition{
background: purple;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;
}
.transition:hover{
width:400px;
} /*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
animate 属性规定所有动画属性的简写属性，除了 animation-play-state 属性。
动画的名称:animation-name;
动画的时长:animation-duration;
动画播放方式(速度曲线):animation-timing-function;
动画开始播放的时间:animation-delay;
动画播放次数:animation-iteration-count;
动画播放方向:animation-direction;
动画的播放状态:animation-play-state;
动画时间外属性:animation-fill-mode;
*/
.animation{
animation:an1 5s;
-moz-animation:an1 5s; /* Firefox */
-webkit-animation: an1 5s; /* Safari 和 Chrome */
-o-animation: an1 5s;
}
.animation2{
animation:an2 5s;
-moz-animation:an2 5s; /* Firefox */
-webkit-animation: an2 5s; /* Safari 和 Chrome */
-o-animation: an2 5s;
} @keyframes an1{
from{background: red;}
to{background: yellow;}
}
@keyframes an2{
0%{background: red;}
25%{background: yellow;}
50%{background: blue;}
100%{background: black;}
} </style>
</head>
<body>
<!-- 2D转换 --> <div class='translate'></div>
<div class='rotate'></div>
<div class='skew'></div>
<div class='scale'></div>
<div class='matrix'></div> <!-- 3D转换 -->
<div class='rotateX'>hello word</div>
<div class='rotateY'>hello word</div> <!-- 过渡 -->
<div class='transition'></div> <!-- 动画 -->
<div class='animation'></div>
<div class='animation2'></div>
</body>
</body>
</html>
matrix并不明白其意思