CSS Note 2.1 transform简要

一、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);
}

二、效果展示