<!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;
            width: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>

指定变形中心点CSS3的更多相关文章

  1. css3中变形与动画（一）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  2. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  3. 从零开始学习前端开发 — 14、CSS3变形基础

    一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...

  4. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  5. 重新想，重新看——CSS3变形，过渡与动画②

    本篇文章主要用来归纳总结CSS3变形属性. CSS3变形属性大致可以分为以下三个部分: 变形控制属性 2D变形函数 3D变形函数 下面将对其一一进行分析: 1.变形控制属性 所谓的变形控制属性主要指“ ...

  6. 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...

  7. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...

  8. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  9. css3变形

    CSS3变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点 ...

随机推荐

  1. P4824 [USACO15FEB]Censoring (Silver) 审查(银)&&P3121 [USACO15FEB]审查（黄金）Censoring (Gold)

    P3121 [USACO15FEB]审查(黄金)Censoring (Gold) (银的正解是KMP) AC自动机+栈 多字符串匹配--->AC自动机 删除单词的特性--->栈 所以我们先 ...

  2. ELK之logstash6.5

    首先安装,这里采用rpm安装: # rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch 创建repo文件: [root@no ...

  3. 20145118《Java程序设计》 第9周学习总结

    20145118 <Java程序设计>第9周学习总结 教材学习内容总结 1.SUN公司定义了一套Java操作数据库的规范(接口)来简化数据库操作,称之为JDBC.开发人员只需要学习jdbc ...

  4. Python3基础 os listdir 列举指定的所有文件及文件夹的名字

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. 一个改写MBR的例子

    前言 想要对MBR类的病毒进行一下研究与学习,在此期间,看了很多资料,其中帮助最大的就是金龟子学姐和willj学长发表的文章.一个从源码与实现角度来讲了一下,另外一个从反病毒角度来分析.   功能描述 ...

  6. 搭建最新版本的Android开发环境

    只为成功找方法,不为失败找借口! Android开发学习总结(一)——搭建最新版本的Android开发环境 最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Andr ...

  7. ubuntu下桌面假死处理方法(非重启)

    一.背景 2018/05/22,就在这一天,进入ubuntu的桌面后随便点击任何位置均无法响应,此时又不想重启,遂出此文 二.解决方案 2.1 关掉Xorg进程 2.1.1按下ctrl+alt+F1进 ...

  8. ZOJ 2083 Win the Game（SG函数）题解

    题意:给一端n块的板,两人玩,每次能涂相邻两块没涂过的板,不能涂的人为输,先手赢输出yes 思路:sg函数打表,练习题 代码: #include<queue> #include<cs ...

  9. Java8新特性：Function接口和Lambda表达式参考

    Lambda基本:https://blog.csdn.net/wargon/article/details/80656575 https://www.cnblogs.com/hyyq/p/742566 ...

  10. 从零开始的四轴飞行器-开篇flag

    在这里立下flag,我要理解学会四轴飞行器的控制方法.