CSS缩放函数, 旋转函数与倾斜函数

1 ：缩放

scale(x,y)函数让元素根据中心原点对对象进行缩放，大于1进行放大，小于1则缩小，如果为负值，则先进行翻转再进行缩放操作。

实例：

HTML：

   <div class="old11">

       <h3>原图</h3>

       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>

    </div>

    <div class="new11">

       <h3>对x轴放大2倍，对Y轴放大2倍</h3>

       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"  style="margin-top:60px;"/>

   </div>

CSS：

   div.old11,div.new11 {

      margin:0 auto;

      position:relative;

      width:500px;

   }

   .new11 img {position: absolute;}

   .new11 img{

      -webkit-transform:scale(-2,2);

         -moz-transform:scale(-2,2);

           -o-transform:scale(-2,2);

              transform:scale(-2,2);

   }

原图

先对其左右翻转，对x轴放大2倍，对Y轴放大2倍

使用transform-origin对transform：scale元素进行重置原点位置

默认使用中心点位置对元素进行缩放效果

使用transform-origin来改变元素的中心点-使元素left成为元素的起点位置对元素进行缩放

2：旋转

rotate(x)通过选定元素原点中心进行旋转，正：顺时针，负：逆时针（2d).

实例：

HTML：

   <div class="old33">

       <h3>原图</h3>

       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>

   </div>

   <div class="new33">

       <h3>对原图旋转45度</h3>

       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"  style="margin-top:20px;"/>

   </div>

CSS：

 div.old33,div.new33 {

      margin:0 auto;

      position:relative;

      width:500px;

 }

 div.new33 img{

      -webkit-transform:rotate(45deg);

         -moz-transform:rotate(45deg);

           -o-transform:rotate(45deg);

              transform:rotate(45deg);

 }

原图

对原图旋转45度

*改变旋转中心点：transform-origin

实例：

HTML：

 <div class="transform-origin">

     <h3>默认使用中心点位置对元素进行旋转效果</h3>

     <div class="old">

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

     </div>

     <h3>使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行旋转</h3>

     <div class="new">

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

     </div>

     </div>

CSS：

 .transform-origin div {

         width: 500px;

         height: 300px;

         position: relative;

     }

     .transform-origin div img {

         position: absolute;

         top: 50px;

         left: 50px;

     }

     .transform-origin div img:nth-child(1){

         opacity: .5;

         z-index:;

         transform: rotate(10deg);

     }

     .transform-origin div img:nth-child(2){

         opacity: .6;

         z-index:;

         transform: rotate(25deg);

     }

     .transform-origin div img:nth-child(3){

         opacity: .7;

         z-index:;

         transform: rotate(35deg);

     }

     .transform-origin div img:nth-child(4){

         opacity: .8;

         z-index:;

         transform: rotate(45deg);

     }

     .transform-origin div img:nth-child(5){

         z-index:;

         transform: rotate(60deg);

     }

     .transform-origin .new img {

         transform-origin: bottom;

     }

默认使用中心点位置对元素进行旋转效果

使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行旋转

3：倾斜

skey(x,y):可以将元素以其中心位置围绕着x轴与y轴按照一定角度进行倾斜。

实例：

HTML：

<h2>transform属性-skew倾斜的demo</h2>

<div class="skew">

    <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/>

</div>

CSS：

.skew img {

    -webkit-transform:skew(0deg);

    -moz-transform:skew(0deg);

    -o-transform:skew(0deg);

    transform:skew(0deg)

    transition:1s all linear;

}

.skew {
     width:520px;
     height:280px;
     overflow:hidden;
}

.skew img:hover {
    -webkit-transform:skew(20deg);
       -moz-transform:skew(20deg);
         -o-transform:skew(20deg)；
            transform:skew(20deg)
}

演示倾斜demo.

使用transform-origin对transform：skew元素（倾斜）进行重置原点位置

实例：

HTML：

     <div class="transform-origin-skew">

         <h3>默认使用中心点位置对元素进行倾斜效果</h3>

         <div class="old">

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         </div>

         <h3>使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行倾斜</h3>

         <div class="new">

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />

         </div>

     </div>

CSS：

     .transform-origin-skew div {

         width: 500px;

         height: 300px;

         position: relative;

     }

     .transform-origin-skew div img {

         position: absolute;

         top: 50px;

         left: 50px;

     }

     .transform-origin-skew div img:nth-child(1){

         opacity: .5;

         z-index:;

         transform: skew(-10deg);

     }

     .transform-origin-skew div img:nth-child(2){

         opacity: .6;

         z-index:;

         transform: skew(-15deg);

     }

     .transform-origin-skew div img:nth-child(3){

         opacity: .7;

         z-index:;

         transform: skew(-20deg);

     }

     .transform-origin-skew div img:nth-child(4){

         opacity: .8;

         z-index:;

         transform: skew(-25deg);

     }

     .transform-origin-skew div img:nth-child(5){

         z-index:;

         transform: skew(-30deg);

     }

     .transform-origin-skew .new img {

         transform-origin: bottom;

     }

演示demo:

默认使用中心点位置对元素进行倾斜效果

使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行倾斜

（感谢-空智）

CSS缩放函数, 旋转函数与倾斜函数的更多相关文章

html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结
Day27 html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...
js中的全局变量和静态变量的使用, js 的调试?- 如果js出错, js引擎就会停止, 这会导致后面的 html中 refer 该函数时, 会报错函数为定义!!
效果里面的函数, 如show, hide,slideDown等, 这些都叫 "效果"函数, 但是里面可以包含动画, 也可以不包含动画. 动画,是指元素的内容是逐渐显示/ ...
2-2 Sass的函数功能-字符串与数字函数
Sass的函数简介在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: 字符串函数数字函数列表函 ...
Sql Server函数全解<二>数学函数
阅读目录 1.绝对值函数ABS(x)和返回圆周率的函数PI() 2.平方根函数SQRT(x) 3.获取随机函数的函数RAND()和RAND(x) 4.四舍五入函数ROUND(x,y) 5.符号函数SI ...
Sql Server函数全解<一>字符串函数
阅读目录 1.ASCII()函数 2.CHAR()函数 3.LEFT()函数 4.RIGHT()函数 5.LTRIM()函数 6.RTRIM()函数 7.STR()函数 8.字符串逆序的函数REVER ...
JS函数 -- 功能，语法，返回值，匿名函数，自调用匿名函数，全局变量与局部变量，arguments的使用
“JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...
Sql Server函数全解(一)字符串函数
字符串函数用于对字符和二进制字符进行各种操作 1.ASCII()函数 ASCII(character_expression)函数用于返回字符串表达式中最左侧的ASCII代码值.参数character ...
《zw版·Halcon-delphi系列原创教程》 Halcon分类函数009,Measure，测量函数
<zw版·Halcon-delphi系列原创教程> Halcon分类函数009,Measure,测量函数为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替 ...
C++调用动态库中的虚基类成员函数时总是进错函数
原创文章,转载请注明作者与本文原始URL. 问题描述:最近遇到这样一个问题,在调用C++的一个成员函数时,总是进错函数.在调用 pMsg->GetMsgContent() 的时候,总是进入到 p ...

随机推荐

Normalize.css 初识
一. 用来干嘛的一个现代的.准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念. Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准.它只是针对那 ...
Reflection
Reflection 反射能在运行时获取一个类的全部信息,并且可以调用类方法,修改类属性,创建类实例. 而在编译期间不用关心对象是谁反射可用在动态代理,注解解释,和反射工厂等地方. -------- ...
Sprint(第七天11.20)
燃尽图
eclipse 条件断点的使用
在某些特殊情况下,我们可能需要远程debug服务器进行问题追踪排查.比如在系统日志不够完善,没法定位问题的情况下需要远程debug进行排查. 但是服务器处于并发调用状态,怎样才能不影响其他业务系统调用 ...
AngularJS 特性—SinglePage、template、Controller
单页Web应用(SinglePage) 顾名思义,只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面,Ajax加载数据页面无刷新,实现操作各种操作. 模板(templa ...
怎样去除ul li a标签文字下的下划线
这个主要是text-decoration属性,颜色的话就是普通的了 <style> ul li a{ text-decoration:none; } ul li a { color: ...
Gradle build设置自动log开关
应用场景通常情况下我们的apps发布后也就是release模式下log是不显示的,debug模式下是显示log的,但是在特殊情况下我们测试release包的时候需要log的时候,就无法使用Build ...
hdu2243考研路茫茫——单词情结（ac+二分矩阵）
链接跟2778差不多,解决了那道题这道也不成问题如果做过基本的矩阵问题. 数比较大,需要用unsigned longlong 就不需要mod了溢出就相当于取余 #include <iostr ...
程序设计入门——C语言第2周编程练习 1时间换算（5分）
1 时间换算(5分) 题目内容: UTC是世界协调时,BJT是北京时间,UTC时间相当于BJT减去8.现在,你的程序要读入一个整数,表示BJT的时和分.整数的个位和十位表示分,百位和千位表示小时.如果 ...
static（静态、修饰符）
static(静态.修饰符) static修饰成员变量时:static修饰成员变量时,那么该成员变量的数据就是一个共享的数据. 静态成员变量的访问方式: 方式一: 使用对象进行访问. 对象.属性名方 ...

CSS缩放函数, 旋转函数与倾斜函数

原图

先对其左右翻转，对x轴放大2倍，对Y轴放大2倍

使用transform-origin对transform：scale元素进行重置原点位置

默认使用中心点位置对元素进行缩放效果

使用transform-origin来改变元素的中心点-使元素left成为元素的起点位置对元素进行缩放

原图

对原图旋转45度

*改变旋转中心点：transform-origin

默认使用中心点位置对元素进行旋转效果

使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行旋转

3：倾斜

默认使用中心点位置对元素进行倾斜效果

使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行倾斜

CSS缩放函数, 旋转函数与倾斜函数的更多相关文章

随机推荐

热门专题