zoukankan      html  css  js  c++  java
  • 指定变形中心点CSS3

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>指定变形中心点</title>
         <style type="text/css">
            /*基本设置*/

    body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/

    div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/

    ul,li,ol{list-style:none;}/*去除列表符号*/

    img{border:none;}/*去除图片按钮边框*/

    a{text-decoration:none;}/*去除超链接下划线*/
    img,input,textarea{vertical-align:middle;}
            div {
                position:absolute;
                90px;
                height:90px;
                background-color:#e4105e;
                border:2px solid #000000;
                margin:30px;
            }
             div.a {
             left:30px;
             top:30px;
            }
             div.b {
             left:30px;
             top:150px;
            }
              div.c {
             left:30px;
             top:270px;
            }
     </style>
    </head>
    <body>
     <div class="a">为变换之前</div>
    <div class="a" style=" background:#b6ff00;
             -moz-transform-origin:left top;-moz-transform:rotate(-25deg);
             -webkit-transform-origin:left top;-webkit-transform:rotate(-25deg);
             -o-transform-origin:left top;-webkit-transform:rotate(-25deg);">左上角为变形中心</div>

    <div class="b">为变换之前</div>
    <div class="b" style="background:#266c9b;
             -moz-transform-origin:right bottom;-moz-transform:rotate(75deg);
             -webkit-transform-origin:right bottom;-webkit-transform:rotate(75deg);
             -o-transform-origin:right bottom;-webkit-transform:rotate(75deg);">右下角为变形中心</div>

    <div class="c">为变换之前</div>
    <div class="c" style="background:#ff6a00;
    -moz-transform-origin:right center;-moz-transform:rotate(-90deg);   
    -webkit-transform-origin:right center;-webkit-transform:rotate(-90deg); 
    -o-transform-origin:right center;-o-transform:rotate(-90deg);     
    ">右边界中间为变形中心点</div>

    </body>
    </html>

  • 相关阅读:
    安装和配置SQL
    自定义中间件封装为模块
    留言板
    Spring Factories机制
    JVM参数配置
    全链路监控的方案概述与比较
    Lombok注解-@SneakyThrows
    @FeignClient注解 中属性 contextId使用
    @validate或@valid注解进行数据校验的解决方案
    maven的settings.xml标签详解
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3155713.html
Copyright © 2011-2022 走看看