CSS3的transform属性
CSS3的一些属性可能比较新,有一些书从国外翻译到国内的时间上会延缓1-2年。所以有一些东西还需要及时整理。
下面说一下CSS3的一个属性:transform
其实字面上的意思已经很明显了就是变化,变幻的意思。
那到底怎么个变法?
transform可以选下面几个值:
- 旋转-rotate(rotatex,rotatey)
- 倾斜-skew
- 缩放-scale
- 移动-translate
下面给出的例子可能都非常简单,真正详细的还是看W3School毕竟是定期更新的
1.rotate
a.rotate{
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);/*没有火狐的前缀,已经规范了*/
}
不知道大家知道不知道这里的20deg是什么意思,deg是度的意思大家都知道。然后20deg就是正向旋转20度,当然也有负向旋转的,上面代码全部改成-10deg之后就是下面这样,看下面:
应该很清楚了,默认的旋转中心是矩形高和宽的中点
2.skew
a.skew{
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);/*没有火狐的前缀,已经规范了*/
}
斜切20度是什么概念?想象用手指从右边推矩形然后矩形像果冻一样倾斜了,倾斜的角度和原来的角度相差20度
3.scale
a.scale{
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);/*没有火狐的前缀,已经规范了*/
}
原来的是没放大是下面这样的:
4.translate
a.translate{
-webkit-transform: translate(250px,10px);
-ms-transform: translate(250px,10px);
-o-transform: translate(250px,10px);
transform: translate(250px,10px);/*没有火狐的前缀,已经规范了*/
}
原来的是没移动的时候是下面这样的,可能translateY看不太出来,但是X就非常明显了,translateY的大家脑补一下:
5.transform综合
a.transform:hover{
-webkit-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
-ms-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
-o-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);/*没有火狐的前缀,已经规范了*/
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;/*没有火狐和IE的前缀,已经规范了*/
}
鼠标hover一下你懂的
感觉自己总结的都很水,不过还是方便翻阅和学习的
点击查看原文:原文地址
CSS3的transform属性的更多相关文章
- CSS3中transform属性的用法
有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source print? 01 &l ...
- css3之transform属性实现div不定宽高垂直水平居中
transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...
- css3使用transform属性制作js弹性运动
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 通过js获取元素css3的transform rotate旋转角度方法
我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- 吃透css3之3d属性--perspective和transform
本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...
- 【CSS3 transform属性和过渡属性详解】
CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...
- CSS3 transform 属性
CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...
随机推荐
- nginx 在浏览器端保持cookie 一致
一般来说,我们在java中都通过如下代码进行用户登录后的服务端注册,并且在用户下次请求时无需再登陆一遍,这就是Servlet的Session.使用了这种Session策略,那么Web容器比如tomca ...
- 【BZOJ3638】Cf172 k-Maximum Subsequence Sum 线段树区间合并(模拟费用流)
[BZOJ3638]Cf172 k-Maximum Subsequence Sum Description 给一列数,要求支持操作: 1.修改某个数的值 2.读入l,r,k,询问在[l,r]内选不相交 ...
- Spring基础知识详解
Spring 概述 1. 什么是spring? Spring 是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring ...
- golang 面向对象
深入理解GO语言的面向对象_Golang_脚本之家 https://www.jb51.net/article/94030.htm 深入理解GO语言的面向对象 更新时间:2016年10月04日 10:4 ...
- JavaScript获取地址栏内容
例如地址为:http://www.mazey.net/baby/blog/index.php?a=1&b=2#c var query = window.location.href; //htt ...
- PHP7-MySQLi在分页中的应用
获取页码,设置每页行数 $page = $_POST["page"]; if($page == ""||$page <= 0){ $page = 1; } ...
- linux环境配置nginx导致页面不刷新
在linux环境下,配置了nginx负载均衡,由于可能在虚拟主机的配置文件nginx.conf中,对缓存机制未配置成功,导致页面不刷新,仍然显示缓存中的内容. 最后通过注释nginx.conf文件中的 ...
- jquery生成二维码图片
1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...
- unity里c# gc优化 -字符串
1使用unsafe,直接修改字符串 public static class UnsafeString { public static unsafe void Copy(this string str, ...
- SqlProfiler的替代品-ExpressProfiler
可以用来跟踪执行的sql语句.安装SqlServer之后SqlServerManagementStudio自带一个SqlProfiler,但是如果安装的SqlExpress,那就没有了. 项目的主页在 ...