• css3 2d转换


    <!DOCTYPE html>
    <html>
    <head>
    <title>2D转换</title>
    <style type="text/css">
    .box{
    400px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    }
    img:nth-child(1){
    400px;
    height: 400px;
    }
    img:nth-child(2){
    150px;
    height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    /*translate平移 单位px 也可以使用百分比
    translate()只写一个值的时候代表的是x的偏移 两个参数代表是x,y的偏移
    */
    /*transform: translateY(10%) translateX(10%);*/
    /*transform: translate(10px,100px);*/
    /* scale 单位是数值 缩放 scaleX()代表在x方向上缩放 scaleY()代表在y轴上缩放
    scale()只有一个值的时候代表xy方向上都进行缩放
    不能为负值 负值时取的是绝对值*/
    /*transform: scale(2);*/
    /*skew 单位是deg角度
    skew()只有一个参数的时候 代表在x轴上倾斜 两个参数的时候代表分别在xy轴上倾斜*/
    /*transform: skew(10deg,20deg);*/
    /*rotate旋转单位是角度 rotateX代表绕着x轴顺时针旋转
    rotateY代表绕着y轴顺时针旋转
    rotate()一个参数的时候代表在Z轴上旋转 不能多个值*/
    transform: rotate(20deg);
    /*transform-origin可以来决定旋转的位置 默认的是50% 50%
    也可以设置成关键词如left top center center等等*/
    transform-origin: center center;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <img src="img/bg-grid.jpg">
    <img src="img/dameizi.jpeg">
    </div>
    </body>
    </html>

  • 相关阅读:
    流形学习(Mainfold Learning)
    陈皓的博客
    背包九讲
    阮一峰的个人网站
    PyTorch教程【六】Transforms的使用
    PyCharm设置代码提示忽略大小写
    PyTorch教程【五】TensoBoard的使用
    pip 换源
    PyCharm常用快捷键
    JAVA基础篇—HashMap
  • 原文地址:https://www.cnblogs.com/adialike/p/6388757.html
Copyright © 2020-2023  润新知