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 ...

随机推荐

HDU1532 Drainage Ditches 网络流EK算法
Drainage Ditches Problem Description Every time it rains on Farmer John's fields, a pond forms over ...
StudyFoxCMS-8
1.swiper插件使用首页图片滚动插件. (1)下载:bower install swiper (2)使用:参考中文官网(http://www.swiper.com.cn/usage/index. ...
Claims Identity
using System;using System.Collections.Generic;using System.Linq;using System.Security.Claims;using S ...
Android NDK开发入门实例
AndroidNDK是能使Android应用开发者把从c/c++编译而来的本地代码嵌入到应用包中的一系列工具的组合. 注意: AndroidNDK只能用于Android1.5及以上版本中. I. An ...
java.lang.OutOfMemoryError: PermGen space异常处理（内存溢出）
楼主刚接触到这个问题,问度娘,直接查到的都是让在tomcat>bin>catalina.sh文件的“echo "Using CATALINA_BASE: $CATALINA_B ...
python之Excel操作
#coding:utf-8 __author__ = 'similarface' import xlrd book=xlrd.open_workbook('/Users/similarface/Dow ...
angular 三目运算符需要换色或style
解决方法:直接简单粗暴写两个.有点挫,但实现需求了. <font style="color:red" ng-show="boxlist.lineTitle.leng ...
linux笔记：shell编程-正则表达式
正则表达式与通配符(正则表达式匹配字符串,是包含匹配:通配符匹配文件名,是完全匹配.): 基础正则表达式: 正则表达式示例:
LinkedList其实就那么一回事儿之源码分析
上篇文章<ArrayList其实就那么一回儿事儿之源码分析>,给大家谈了ArrayList, 那么本次,就给大家一起看看同为List 家族的LinkedList. 下面就直接看源码吧: p ...
js中的cookie操作
一.js cookie 使用时把此段代码引入页面 (function (factory) { if (typeof define === 'function' && define. ...

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

原图

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

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

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

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

原图

对原图旋转45度

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

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

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

3：倾斜

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

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

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

随机推荐

热门专题