<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并不明白其意思