通过transform来实现的2D/3D的转换

转换:是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放

甚至支持矩阵方式,配合过渡和动画知识,可以取代大量之前只能靠Flash才可以实现

的效果。在css3 当中,通过transform(变形) 来实现2d 或者3d 转换,有四种,

放,移动,旋转,倾斜

(1)缩放:scale(x,y)对元素进行水平和垂直方向的缩放,x、y的取值可为小数, 

                   不可为负值;

.box>div{
    width: 300px;
    height:150px;
    border: 1px solid #000;
    background-color: red;
    float: left;
    margin-right: 30px;
}
div:nth-child(2){
    background-color: pink;
    transition:all 1s;
}
div:nth-child(2):hover{
    /*width: 600px;*/
    /* 变形*/
    /*
        scale: 缩放
        scale(水平放缩比例,垂直放缩比例);
        大于1:放大
        小于1:缩小
        如果只写一个值等比例缩放
    */
    transform: scale(2,0.5);

(2)移动:translate(x,y)改变元素的位置,x、y可为负值;

.box{
    width: 300px;
    height: 300px;
    background-color: red;
    margin:100px auto;

    transition:all 1s;
    color:#fff;
    font-size:50px;

}
/* rotate(角度) 旋转
    正值 顺时针
    赋值:逆时针
*/
.box:hover{
    transform:rotate(-945deg);
}

(3)旋转:rotate(deg)正值为顺时针,负值为逆时针;

.out{
    width: 300px;
    height: 150px;
    background-color: pink;
    margin-top:200px;
    position: relative;
}

.out::before{
    content:"";
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: pink;
    transform:rotate(45deg);
    left:40%;
    top:-15px;

}


展开阅读全文

没有更多推荐了,返回首页