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 ...
随机推荐
- Android中插件开发篇之----应用换肤原理解析
一.前言 今天又到周末了,感觉时间过的很快呀.又要写blog了.那么今天就来看看应用的换肤原理解析.在之前的一篇博客中我说道了Android中的插件开发篇的基础:类加载器的相关知识.没看过的同学可以转 ...
- 动态创建的DOM元素进行事件绑定
http://files.cnblogs.com/files/xsmhero/jquery.livequery.js <script type="text/javascript&quo ...
- 【java】关于时间
import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; /** * Created b ...
- onethink使用经验
1 建议随时从oschina上下载onethink的最新版本,如果你遇到了怎么都解决不了的问题,比如菜单管理自定义菜单,左侧二级菜单不显示的问题,好像有一个历史版本就是有bug,好像是1.1开始的一个 ...
- Div中高度自适应增长方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- python yield的初识
---------2016-5-18 10:49:45-- source:
- linux进程编程:子进程创建及执行函数简介
linux进程编程:子进程创建及执行函数简介 子进程创建及执行函数有三个: (1)fork();(2)exec();(3)system(); 下面分别做详细介绍.(1)fork() 函数定 ...
- linux共享库
linux共享库 linux中共享库一般以.so.x.y.z 命名,其中x,y,z分别为主版本号.次版本号.发布版本号.同一个库,主版本号不同则相互不兼容:主版本相同,次版本号高的库比次版本号低的库有 ...
- javascript数组常用方法汇总
1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使 ...
- Django1.9开发博客(7)- 实现功能
到目前为止我们已经完成了一个django应用的所有基础部分. 包括url配置.视图.模型和模板.接下来开始继续完善我们的博客系统了. 首先我们需要一个显示每篇文章的详细页面,对不? 文章详情 对于首页 ...