zoukankan      html  css  js  c++  java
  • css transform 2D3D转换

    2D转换

    translate 移动

    <style>
    div{  100px; height: 100px; }
    .box{ border: 1px dashed red; float: left; margin-right: 80px;}
    .boxs{ background: #ff000061; border: 1px solid #ccc; }
    .box1{ transform: translateX(50px); }
    .box2{ transform: translate(20px, 20px); }
    .box3{ transform: translateY(50px); }
    </style>
    <div class="box">
        <div class="boxs box1">translateX()</div>
    </div>
    <div class="box">
        <div class="boxs box2">translate()</div>
    </div>
    <div class="box">
        <div class="boxs box3">translateY()</div>
    </div>
    

    rotate 旋转

    <style>
    div{  100px; height: 100px; }
    .box{ border: 1px dashed red; float: left; margin-right: 50px;}
    .boxs{ background: #ff000061; border: 1px solid #ccc; }
    .box1{ transform: rotate(45deg); }
    .box2{ transform: rotate(90deg); }
    </style>
    <div class="box">
        <div class="boxs box1">rotate(45deg)</div>
    </div>
    <div class="box">
        <div class="boxs box2">rotate(90deg)</div>
    </div>
    

    瞬时间方向旋转,值为负数时则反方向

    scale 放大缩小

    <style>
    div{  100px; height: 100px; }
    .box{ border: 1px dashed red; float: left; margin-right: 80px;}
    .boxs{ background: #ff000061; border: 1px solid #ccc; }
    .box1{ transform: scale(2, 1.2); }
    .box2{ transform: scale(0.9); }
    .box3{ transform: scale(1.2); }
    </style>
    <div class="box">
    	<div class="boxs box1">scale(2, 1.2)</div>
    </div>
    <div class="box">
    	<div class="boxs box2">scale(0.9)</div>
    </div>
    <div class="box">
    	<div class="boxs box3">scale(1.2)</div>
    </div>
    

    skew 倾斜

    <style>
    div{  100px; height: 100px; }
    .box{ border: 1px dashed red; float: left; margin-right: 80px;}
    .boxs{ background: #ff000061; border: 1px solid #ccc; }
    .box1{ transform: skew(20deg, 20deg); }
    .box2{ transform: skewX(45deg); }
    .box3{ transform: skewY(45deg); }
    </style>
    <div class="box">
    	<div class="boxs box1">skew(20deg, 20deg)</div>
    </div>
    <div class="box">
    	<div class="boxs box2">skewX(45deg)</div>
    </div>
    <div class="box">
    	<div class="boxs box3">skewY(45deg)</div>
    </div>
    

    matrix 2D变换方法合并

    matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

    3D转换

  • 相关阅读:
    获取SqlServer2005表结构
    SQL SERVER 2005连接其它数据库并导入数据表
    vs2008安装失败问题
    Elmah使用方法
    使用postman发送请求,body为空
    docker的简单使用
    mongodb5最新版本的安装和向外暴露端口
    初探gin框架
    img图片的src指定为网络中随便找的图片链接,但是控制台报错get请求403
    父元素为flex布局时,设置最后一个子元素靠右,其他靠左
  • 原文地址:https://www.cnblogs.com/xiaobaiv/p/9186731.html
Copyright © 2011-2022 走看看