web前端入门到实战:CSS3常用转换总结

发布时间:2020-06-11 05:20:33 作者:前端向南
来源:网络 阅读:685

一、2D转换

web前端入门到实战:CSS3常用转换总结

  相对当前元素位置移动

/* 实现div向左移动50个像素,并向下移动100个像素 */

div
{
            transform: translate(50px,100px);
        -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)

web前端入门到实战:CSS3常用转换总结

  相对当前角度旋转

/* 实现div顺时针旋转30度 */

div
{
            transform: rotate(30deg);
        -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
}

web前端入门到实战:CSS3常用转换总结

  相对当前大小缩放

/* 实现div宽度加长2倍,高度增高3倍 */

div
{
            transform: scale(2,3);
        -ms-transform: scale(2,3);
    -webkit-transform: scale(2,3);
}

web前端入门到实战:CSS3常用转换总结

  相对当前角度透视倾斜

/* 实现div在X轴和Y轴上分别倾斜20度和30度 */

div
{
            transform: skew(30deg,20deg);
        -ms-transform: skew(30deg,20deg);
    -webkit-transform: skew(30deg,20deg);
}

web前端入门到实战:CSS3常用转换总结

  复合属性,六个参数分别包含旋转,缩放,移动(平移)和倾斜功能

/* 实现div旋转30° */

div
{
            transform:matrix(0.8,0.5,-0.5,0.8,0,0);
        -ms-transform:matrix(0.8,0.5,-0.5,0.8,0,0);
    -webkit-transform:matrix(0.8,0.5,-0.5,0.8,0,0);
}

二、3D转换

web前端入门到实战:CSS3常用转换总结

  相对当前角度围绕X轴旋转


/* 实现div围绕X轴旋转45度 */

div
{
            transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg);
}

web前端入门到实战:CSS3常用转换总结

  相对当前角度围绕Z轴旋转

/* 实现div围绕Z轴旋转45度 */

div
{
            transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
}
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)

translateX(npx)

web前端入门到实战:CSS3常用转换总结

 相对当前元素位置沿X轴移动

translateY(npx)
  相对当前元素位置沿Y轴移动

translateZ(npx)
  相对当前元素位置沿Z轴移动

translate3d(x,y,z)

scaleX(n)

web前端入门到实战:CSS3常用转换总结

 相对当前元素位置沿X轴缩放

scaleY(n)
  相对当前元素位置沿Y轴缩放

scaleZ(n)
  相对当前元素位置沿Z轴缩放

scale3d(x,y,z)

rotateX(ndeg)

web前端入门到实战:CSS3常用转换总结

  相对当前元素位置沿X轴旋转

rotateY(ndeg)
  相对当前元素位置沿Y轴旋转

rotateZ(ndeg)
  相对当前元素位置沿Z轴旋转

rotate3d(xdeg,ydeg,zdeg)

推荐阅读:
  1. web前端入门到实战:CSS背景background
  2. web前端入门到实战:css3动画 Transition

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css 前端入门

上一篇:MySQL 5.5.32 编译安装

下一篇:字典的基本操作

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》