<!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. HCNP学习笔记之IP地址、子网掩码、网关的关系

      0x00 概述 网络管理中的IP地址.子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置. 以下我们就来深入浅出地讲解什么是子网掩码. IP地址的结构 ...

  2. 02: python3使用email和smtplib库发送邮件

    1.1 发送qq邮箱 注:python代理登录qq邮箱发邮件,是需要更改自己qq邮箱设置的.在这里大家需要做两件事情:邮箱开启SMTP功能 .获得授权码 教程链接 1.给单个人发邮件 参考 from ...

  3. 20145206邹京儒 EXP7网络欺诈技术防范

    20145206邹京儒 EXP7网络欺诈技术防范 一.实践过程记录 URL攻击实验前准备 1.在终端中输入命令:netstat -tupln |grep 80,查看80端口是否被占用,如下图所示 2. ...

  4. POJ 2425 A Chess Game（有向图SG函数）题解

    题意:给一个有向图,然后个m颗石头放在图上的几个点上,每次只能移动一步,如果不能移动者败 思路:dfs打表sg函数,然后求异或和 代码: #include<queue> #include& ...

  5. UVA 10462 Is There A Second Way Left?（次小生成树&Prim&Kruskal）题解

    思路: Prim: 这道题目中有重边 Prim可以先加一个sec数组来保存重边的次小边,这样不会影响到最小生成树,在算次小生成树时要同时判断次小边(不需判断是否在MST中) Kruskal: Krus ...

  6. Cent OS 常用配置命令

    1.ifconfig   #查看网络接口状态 2.ifconfig –a  #查看主机所有接口的情况 3.ifconfig eth0 192.168.1.106 netmask 255.255.255 ...

  7. org.apache.axis2.AxisFault: org.apache.axis2.databinding.ADBException: Unexpected subelement profile

    原创:转载请注明出处 1.异常情况 org.apache.axis2.AxisFault: org.apache.axis2.databinding.ADBException: Unexpected ...

  8. BFS-迷宫问题-用宽度(广度)优先搜索解决最优路径问题

    题目: 给定一个大小为 N×M 的迷宫.迷宫由通道和墙壁组成,每一步可以向邻接的上下左右四格 的通道移动.请求出从起点到终点所需的最小步数.请注意,本题假定从起点一定可以移动 到终点. 限制条件;N, ...

  9. js delete可以删除对象属性及变量

    ,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete o ...

  10. Java中关于Arrays.asList()的操作

    我们可以通过Arrays.asList() 产生一个List,但是要记住,我们通过Arrays.asList产生的list是基于一个固定大小的数组的, 仅支持那些不会改变数组大小的操作.所以我们在使用 ...