zoukankan      html  css  js  c++  java
  • 三维变换

     <style>
    *{
    padding: 0;
    margin: 0;
    }
    div{
    100px;
    height: 100px;
    background-color: red;
    margin-left: 200px;
    margin-top:10px;
    /*添加过渡*/
    transition: transform 2s;
    }
    /*添加三维移动--3D移动*/
    div:first-of-type:active{
    /*translate3d(X方向的偏移,Y方向的偏移,Z方向的偏移)*/
    /*transform: translate3d(400px,0,0);*/
    /*transform: translate3d(400px,400px,0);*/
    transform: translate3d(0px,0px,400px);
    }
    /*添加三维缩放*/
    div:nth-of-type(2):active{
    /*scale3d(x方向上的缩放,y方向的缩放,z方向的缩放)
    >1.01 放大 <0.99 缩小*/
    /*transform:scale3d(2,0.5,10);*/
    transform:scale3d(1,1,10);
    }
    /*添加三维旋转*/
    div:nth-of-type(3):active{
    /*rotate3d(x,y,z,angle):
    x:代表x轴方向上的一个向量值
    y:代表y轴方向上的一个向量值
    z:代表z轴方向上的一个向量值*/
    transform: rotate3d(1,1,1,330deg);
    }
    </style>
    </head>
    <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  • 相关阅读:
    Mybatis学习随笔3
    Mybatis学习随笔2
    Mybatis学习随笔
    Java校招面试-什么是线程安全/不安全
    装饰器2
    装饰器
    默认传参的陷阱
    处理日志文件
    第二天
    用户登录
  • 原文地址:https://www.cnblogs.com/lujieting/p/10230685.html
Copyright © 2011-2022 走看看