zoukankan      html  css  js  c++  java
  • css2D转换和3D转换

    一、2D转换(transform):

      div{

        200px;

        height:200px;

        border-top:2px soild black;

        border-left:2px soild red;

        border-right:2px soild bule;

        border-bottom:2px soild green;

        偏移(translate):

          transform:translate(50px,200px);

              (将元素从左侧移动50像素,从顶端移动200像素)

        转换角度(rotate):

          tranform:rotate(45deg);

            (顺时针旋转45度)

        尺寸增减(scale):

          transform:scale(2,4);

            (将宽度增加为原来的2倍,高度增加为原来的4倍)

        翻转(skew):

          transform:skew(30deg,20deg);

            (将元素围绕x轴翻转30度,围绕y轴翻转20度)

    二、3D转换(将元素围绕x轴、y轴、z轴进行旋转):

          div{    

             200px;      

             height:100px;

             border-top:2px soild green;

             border-left:2px soild red;

             border-right:2px soild gold;

             border-bottom:2px soild black;

            围绕x轴旋转:

              transform:rotateX(180deg);

            围绕Y轴旋转:

              transform:rotateY(90deg);

            围绕Z轴旋转:

              transform:rotateZ(180deg);

              

        

        

  • 相关阅读:
    设置 linux 下 firefox 的默认启动路径
    uvm读书笔记
    case不能复现,vcs 版本号不同带来的影响
    uvm override
    Jenkins 不执行构建里的命令
    sv 报语法错误
    linux 定时删除文件夹的的内容 (find && crontab 使用)
    学习:教材的本质
    学习的本质:认知深度
    演讲:给新仔讲过的商业内容
  • 原文地址:https://www.cnblogs.com/xingxing88/p/5861456.html
Copyright © 2011-2022 走看看