放大 旋转 css3,CSS3详解：transform 的旋转、旋转放大、放大、移动
CSS3 transform是什么？
transform的含义是：改变，使…变形；转换
CSS3 transform都有哪些常用属性？
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
360°旋转 修改rotate(旋转度数)
transform:rotate()：
含义：旋转；其中“deg”是“度”的意思，如“90deg”表示“90度”下同。.a{
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
width:200px;
height:200px;
background-color:#000000;
display:block;
margin:100px auto;
color:#fff;
text-align:center;
line-height:200px;
font-size:20px;
font-weight:bold;
}
.a:hover {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}
360度旋转
放大 修改scale(放大的值)
transform:skew()：
含义：倾斜；
.a{
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
width:200px;
height:200px;
background-color:#000000;
display:block;
margin:100px auto;
color:#fff;
text-align:center;
line-height:200px;
font-size:20px;
font-weight:bold;
}
.a:hover {
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
}
放大效果
旋转放大 修改rotate(旋转度数) scale(放大值)
.a{
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
width:200px;
height:200px;
background-color:#000000;
display:block;
margin:100px auto;
color:#fff;
text-align:center;
line-height:200px;
font-size:20px;
font-weight:bold;
}
.a:hover {
transform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);
-moz-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
}
旋转放大
上下左右移动 修改translate(x轴,y轴)
.a{
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
width:200px;
height:200px;
background-color:#000000;
display:block;
margin:100px auto;
color:#fff;
text-align:center;
line-height:200px;
font-size:20px;
font-weight:bold;
}
.a:hover {
transform:translate(0,-10px);
-webkit-transform:translate(0,-10px);
-moz-transform:translate(0,-10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);
}
上下左右移动
transform:scale()：
含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。.a{transform:scale(1.5)}
比例
transform:translate()：
含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
.a{transform:translate(120px,0)}
变动，位移
继续阅读：CSS3
原创文章请注明转载自霍者博客本文地址：http://www.huozheweb.com/post/243.html，标题：CSS3详解：transform 的旋转、旋转放大、放大、移动
相关文章：
Web SCADA 电力接线图工控组态编辑器
前言 SVG并非仅仅是一种图像格式， 由于它是一种基于XML的语言，也就意味着它继承了XML的跨平台性和可扩展性，从而在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中，而SVG文档中也可以嵌入其他的XML内容，各…
IE6、IE7、IE8的CSS、JS兼容
Internet Explorer 6中查看使用 Microsoft JScript 的网页，可能会遇到web浏览器速度较慢的性能问题。原因是如果js脚本同时创建大量变量，jscript引擎执行垃圾收集算法时会监视脚本中变量分配的 数量、脚本中使用的文字值的数量和脚本中分配的字符串值的总…
中国电子学会青少年编程能力等级测试图形化一级编程题：海底世界
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 海底世界 1. 准备工作 （1）背景：Underwater…
小说站 章节内容 ajax,第17章 作业分析与异步编程原理——2019年5月14日22:00
5月14日作业完善购物车的删除与编辑功能谈一下你对单线程,任务队列与事件循环, 同步与异步的理解单线程：单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。比如：JavaScript就是…
【转载】图像缩放与插值理论基础
图像的缩放 图像经过缩放后有可能在原图中招不到对应的像素点，这需要用图像插值来解决。 1.理论基础 假设图像的X轴方向缩放比例是Kx，Y轴方向的缩放比是Ky，则缩放后输出图像的点（x , y）对应原图中坐标（u , …
【组队学习】【32期】SQL编程语言
SQL编程语言 航路开辟者：王复振、杨煜、闫钟峰、杨梦迪、苏鹏、红星、张晋、汪健麟领航员：李云龙航海士：蒋志强、闫钟峰 基本信息 开源内容：https://github.com/datawhalechina/wonderful-sql开源内容：https://hub.…
查找手机型号云服务器,查找手机型号云服务器
查找手机型号云服务器 内容精选换一换您可以通过“应用管理”页面的应用列表，快速查看应用状态，及相关异常信息，如图1所示。包括：应用状态：即图1中的①应用异常信息：即图1中的②云服务器异常信息࿱…
浅谈25种设计模式（4/25）（此坑未填）
设计模式汇总 创建型模式 这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式，而不是使用新的运算符直接实例化对象。这使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活。 工厂模式（Factory Pattern）抽象工厂模式…
C#学习笔记8：HTML和CSS基础学习笔记
<!-- 1、<P>...</P>段落标签 2、<br/>折行标签。 3、<img src"" height"*px" width"*px" alt"图片描述">。 注意：不能写成<img ></img>的形式。 4、html注释：<!-- …
青少年编程竞赛交流群周报（第043周）
2021年12月26日（周日）晚20:00我们在青少年编程竞赛交流群开展了第四十三期直播活动。 一、直播内容 我们直播活动的主要内容如下： 讲解了上次测试中小朋友们做错的题目 Scratch青少年编程能力等级测试模拟题（四级）。…
数据库备份到文件服务器,数据库文件备份到云服务器上
数据库文件备份到云服务器上 内容精选换一换目前数据库服务器备份Agent安装包需要提交工单进行获取。当前仅支持x86计算类型的服务器，暂不支持鲲鹏计算类型的服务器。用户需要启用数据库备份前，需先在弹性云服务器上更改安全组和安装客户端。本章节指导用…
android String.format
资源创建： <!-- 多参数验证 --> <string name"text">截止到:%1$tc\n销售量比去年增长了%2$d%%\n在这里我对所有奋斗的兄弟姐妹表示感谢\n对表现最优秀 的%3$s等伙伴我们予以奖励\n奖励为价值%4$-9.4e的新马泰游\n希望大家再接再厉额!<…
【组队学习】【32期】数据可视化（Matplotlib）
数据可视化（Matplotlib） 航路开辟者：杨剑砺、杨煜、耿远昊、李运佳、居凤霞领航员：王万航海士：范歆琦、张文恺 基本信息 开源内容：https://github.com/datawhalechina/fantastic-matplotlib开源内容&…
没有完美的人或事
下面以苹果手机为例，说明一个问题当实际值与期望值不符合的时候，人会出现的感情状况 公众人物与普通人 像公众人物类的，在公众面前肯定要表现正式一点的，这个是必须的，这个是有非常大的影响力的。我们的期望值大于或等…
如何理解分时系统的四个特征
多路性 服务多个用户 独立性 各用户独立 及时性 当一个任务暂时不能执行，CPU如子弹上膛般立刻换上另一任务，决不空闲 交互性 即人机交互 分时操作系统服务多个用户，并且让每个用户觉得自己是唯一的用户（它怎么做到这一点的&#x…
中国电子学会青少年编程能力等级测试图形化一级编程题：小狗进圈
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 小狗进圈 小狗非常听话，收到命令能在舞台上向右移动，如…
Swift 值类型和引用类型的内存管理
1、内存分配 1.1 值类型的内存分配 在 Swift 中定长的值类型都是保存在栈上的，操作时不会涉及堆上的内存。变长的值类型（字符串、集合类型是可变长度的值类型）会分配堆内存。 这相当于一个 “福利”，意味着你可以使用值类型更快速…
jquery获取浏览器宽高
满足获取各种高的需求 $(document).ready(function() { alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).oute…
操作系统的管理功能
1.CPU/处理器管理 2.存储器/内存管理 3.文件管理 4.I/O设备管理 一般来讲为以上四大管理功能，如果有第五 5.作业管理
秦州：西瓜书 + 南瓜书 吃瓜系列 13. 降维与度量学习（上）
吃瓜教程——西瓜书南瓜书 Datawhale南瓜书是经典机器学习教材《机器学习》（西瓜书）的公式推导解析指南，旨在让在学习西瓜书的过程中，再也没有难推的公式，学好机器学习。 内容属性：机器学习（理…
flash 入门课知识小结
一、 几种类型帧的小结：（关键帧、空白关键帧、普通帧）1. 特点 帧——是进行flash动画制作的最基本的单位，每一个精彩的flash动画都是由很多个精心雕琢的帧构成的，在时间轴上的每一帧都可以包含需要显示的所有内容&…
VUE解决微信签名,SPA微信invalid signature问题,完美处理
深度解决方案，包教不包会，只因为踩坑无数，希望大家能有所收获 前端小菜鸟，因为项目要对接微信的jssdk，对接就需要签名认证，但是无奈安卓和IOS各有各的坑，本篇文章只讨论签名，和一个分…
如何打开写好的jpetstore
1.停止正在占用8080端口的应用 打开cmd窗口，输入netstat -ano | find “:8080”，查到pid 输入tasklist /fi “pid eq pid”，查到应用的名字 打开任务管理器，停止应用 2.第二步就比较神奇了 打开tomcat的bin目录，先sh…
打通Fedora19的ssh服务
Fedora19的SSH服务是默认关闭的，安装后我们需要打通它。 首先，编辑/etc/ssh/sshd_config，把下面黑体字部分打开注释，如下： # $OpenBSD: sshd_config,v 1.89 2013/02/06 00:20:42 dtucker Exp $# This is the ssh…
使用hql动态创建对象问题
前段时间由于需求要添加报表数据，调整ireport后，打印pdf文件出现数据错位的情况，调试发现不是ireport问题，就查看了后台传送的数据，最后发现传送的对象属性值已经就是错位的，那就是获取对象时出的问题&…
秦州：西瓜书 + 南瓜书 吃瓜系列 14. 降维与度量学习（下）
吃瓜教程——西瓜书南瓜书 Datawhale南瓜书是经典机器学习教材《机器学习》（西瓜书）的公式推导解析指南，旨在让在学习西瓜书的过程中，再也没有难推的公式，学好机器学习。 内容属性：机器学习（理…
从用户角度看，DBMS应当提供哪些功能？
1.定义：提供DDL，供用户使用数据库定义语言创建其想要建立的表，定义三级模式，两级映像。 2.操作：提供DML，供用户可以实现增删改查（追加、删除、更新、查询）等操作。 3.控制࿱…
groovy–运算符重载
Groovy支持运算符重载，各种运算符被映射到普通的java对象的方法调用，这就使得开发者可以利用运算符重载的优势来编写自己的Java或者groovy对象。 下面的表格描述了groovy中的操作符所映射到的方法： Operator Method a b a.plus(b) a – …
【组队学习】【32期】吃瓜教程——西瓜书+南瓜书
吃瓜教程——西瓜书南瓜书 航路开辟者：谢文睿、秦州领航员：陈伟峰航海士：谢文睿、秦州 基本信息 开源内容：https://github.com/datawhalechina/pumpkin-bookB 站视频：https://www.bilibili.com/video/BV1Mh411e7VU内…
关键字this引用
要点提示： 关键字this引用独享自身。他也可以在构造方法内部调用另一个类的其他构造方法。 关键字this是指向调用对象本身的引用名。可以用this关键字引用对象的实例成员。 复制代码 例如：下面a的代码使用this来显示地引用独享的radius以及调用他的getAr…