一、CSS
@charset "UTF-8"; body{ -webkit-perspective: 1200px;/*该属性设置后,其子元素具有透视效果*/ } div{ width: 120px; height: 80px; display: inline-block; margin: 10px; background-color: lime; } #div1{ transform: translate(10px,30px);/*translate移动,等同于transform: translateY(30px);transform: translateX(10px);可以为负值*/ } #div2{ transform: rotate(15deg);/*rotate旋转,正值顺时针旋转,负值逆时针,值也可以用rad弧度*/ transform-origin: left bottom;/*改变基准点,可以用坐标或者像素值、百分比表示,对所有变形有效*/ } #div3{ transform:scale(0.5,1); /*scale缩放,当为一个值时,表示x方向和y方向都缩小*/ } #div4{ transform: skew(10deg,20deg);/*skew倾斜,等同于skewX(10deg)和skewY(20deg)*/ } #div5{ transform: matrix(0.707,-0.707,0.707,0.707,0,0);/*第二三参数表示倾斜弧度,第一四参数表示缩放值,第五六表示平移值*/ } #div6{ transform: translate3D(-25px,15px,-100px);/*z值为正,则靠近,为负则远离*/ } #div7{ transform: rotate3D(1,0,0,45deg);/*沿x轴旋转则为1,不沿着该轴旋转则为0,可以通过transform-origin改变基准*/ } #div8{ transform: scaleZ(2); transform: rotateY(45deg); }
二、效果展示