zoukankan      html  css  js  c++  java
  • 每天CSS学习之transform-origin

    上一篇中,我们学习了如何使用transform来进行2D变形。今天要讲述的transform-origin与这个变形有关。

    origin翻译过来的意思是原点、开端。transform-origin寓意即变形的起点。没错,它的作用就是设置变形的起点。

    transform-orgin:x-axis  y-axis  z-axis;

    翻译过来就是:

    transform-origin:X轴  Y轴  Z轴;

    X轴:left 、center 、right 、百分比、长度

    Y轴:top、center、bottom、百分比、长度

    Z轴:长度

    一般2D变形没有用到Z轴这个参数。

    接下来让我们实践一下,更容易明白。

    以顺时针旋转20度为例:

    1、没有设置transform-orgin时,变形起点默认为中心点:

                .trans1{        
                    z-index:-1;
                    position:absolute;
                    top:100px;
                    left:100px;
                    100px;
                    height:100px;
                    border:1px solid red;    
                    background-color:blue;
                    color:yellow;            
                }
                
                .trans2{                
                    z-index:1;
                    position:absolute;
                    top:100px;
                    left:100px;
                    100px;
                    height:100px;
                    border:1px solid red;    
                    background-color:black;
                    color:red;            
                    
                    transform:rotate(10deg);    
                }

    结果:

    2、设置变形的起点为盒子的右下角,即transform-origin:right bottom;

                .trans1{        
                    z-index:-1;
                    position:absolute;
                    top:100px;
                    left:100px;
                    100px;
                    height:100px;
                    border:1px solid red;    
                    background-color:blue;
                    color:yellow;            
                }
                
                .trans2{                
                    z-index:1;
                    position:absolute;
                    top:100px;
                    left:100px;
                    100px;
                    height:100px;
                    border:1px solid red;    
                    background-color:black;
                    color:red;            
                    
                    transform:rotate(10deg);        
                    transform-origin:right bottom;                
                }

    结果:

     

  • 相关阅读:
    ReactJS读书笔记一:深入理解JSX
    react经验
    React显示和提交数据
    ReactJS
    PHP中使用memcache
    项目目标文档 ---河北省创新平台年报统计
    系统利益相关者描述案例
    梦断代码 --阅读笔记03
    梦断代码 ---阅读笔记02
    梦断代码---读书笔记01
  • 原文地址:https://www.cnblogs.com/williamwsj/p/7401695.html
Copyright © 2011-2022 走看看