transform:2D变形: 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法:translate()/rotate()/scale()/skew()/matrix()
补充1.角度也可以使用弧度单位:rad 变形矩阵功能很强大,但是相对比较复杂,涉及到复杂的数学计算,在本章中暂不作详细讲解。 div{ width: 300px; height: 100px; margin-top:50px; margin-left:50px; padding:0px; background: red; } #div11,#div22,#div33,#div44,#div55,#div66{ margin-left: 0px; background: blue; } #div11:hover{ transform:translate(30px,30px) } #div22:hover{ transform:scale(0.8,0.5); transform-origin: left top; } #div33:hover{ transform:rotate(30deg); /*transform-origin: left top;*/ /*transform-origin: 30px 30px;*/ transform-origin: 30% 30%; } #div44:hover{ /*transform: skewX(30deg);*/ /*transform: skewY(30deg);*/ transform: skew(30deg,45deg); } #div55:hover{ transform: matrix(1,0.3,0,1,0,0); } #div66:hover{ transform:scale(0.8,0.5) rotate(30deg); } transform:3D变形: 3D变形可以近似理解为沿着Z轴<移动元素,使得元素更加靠近或者远离你,从而使元素看起来变得更大或更小。/p>
#div0{ width: 300px; margin: 30px; border: 2px solid red; perspective:1000px; background: red; } #div1,#div2,#div3{ width: 200px; height: 150px; font-size: 50px; margin: 30px auto; background: green; } #div1:hover{ /* transform: translate3d(0,0,-300px);*/ transform:translateZ(-500px); } #div2:hover{ transform: rotate3d(0,1,0,45deg); transform-origin:right; } #div3:hover{ transform: scaleZ(2) rotateX(60deg); transform-origin:top; } body{ perspective:1000px; } #div0:hover{ transform:rotateX(45deg); -webkit-transform:rotateX(45deg); -moz-transform:rotateX(45deg); -o-transform:rotateX(45deg); -ms-transform:rotateX(45deg); } |
|