zoukankan      html  css  js  c++  java
  • 简单的2D变形 CSS transform transition

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>调试练习</title>
    <style>
    #box{
    200px;
    height: 200px;
    background-color: green;
    position: absolute;
    left: 50px;
    top: 50px;
    /*transform:skew(10deg,10deg) */
    }
    #box:hover{
    /*放大缩小 正值0-1为缩小 1以上为变大 负数为先倒转再改变大小*/
    /*transform:scale(-1)*/

    /*旋转角度*/
    /*transform:rotate(45deg)*/

    /*位置移动,第一个值为离X轴的偏移距离,第二个值为离Y轴的偏移距离*/
    /*transform:translate(100px,20px);*/

    /*倾斜动画,这里不同于rotate还会变形图片,当然你也可以在css里写,改变图形样式,不是通过动画hover之类变形*/
    /*transform:skew(30deg,-10deg);*/

    /*这也是一种图片变形*/
    /*transform:matrix(1,0.4,0,1,0,0);*/

    transform:translate(100px,20px) rotate(45deg) scale(1.5) ;
    transition:transform 3s

    }
    </style>
    </head>
    <body>
    <div id="box">hb</div>
    </body>

    </html>

  • 相关阅读:
    文件操作回顾
    数据类型回顾
    面向对象三大特性之封装与多态
    面向对象之继承
    轮播图
    jQuery事件操作
    jQuery动画效果
    jQuery篇
    文档对象模型
    javascript
  • 原文地址:https://www.cnblogs.com/mylove0/p/7475239.html
Copyright © 2011-2022 走看看