【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了。

a)再提一提transform的四个属性

  ①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针。

  ②缩放--->scale(参数a),单位1,也就是“没有单位”,赤裸裸的0-1之间的数字就行,表示为缩放比例。

  ③倾斜--->skew(参数a,参数b),单位deg,两个参数分别表示x,y方向上的倾斜角度,正数顺时针,负数逆时针。

  ④移动--->translate(参数a),单位px,移动方向是在div这个平面方向上(这样说起来,应该有点难理解,放在四维坐标中,把div看做是任意一个平面来理解),也有正数之分,正向前,负向后。

 

1)旋转(rotate),我们先来做一个文字的旋转,就像下面这样

/* HTML */
<div class="div1">我只是一个示例</div>

然后再给它写点样式

 1 /* CSS */
 3     .div1 {
 4                 width: 200px;
 5                 height: 50px;
 6                 font-size: 20px;
 7                 line-height: 50px;
 8                 text-align: center;
 9                 border: 1px solid;
10                 margin: 100px auto;
11                 -moz-transform: rotate(45deg);/* Firefox 旋转属性,参数表示角度(deg表示角度),负数逆时针,正数顺时针 */                
12                 -webkit-transform: rotate(45deg);/* Safari和Chrome */
13                 -ms-transform: rotate(45deg);/* IE 9 */
14                 -o-transform: rotate(45deg);/* Opera */
15             }

 

这是效果图:下图是一行文字,被顺时针旋转45度后的效果图。

 

2)缩放(scale)

1 /* HTML */
2 <div class="div2">我只是一个示例</div>
 1 /* CSS */
 2     .div2 {
 3                 width: 612px;
 4                 height: 408px;
 5                 font-size: 20px;
 6                 margin: 100px auto;
 7                 background: url(img/4.jpg);
 8                 -moz-transform: scale(0.5);/* 缩放属性 ,参数表示缩放倍数,0-1之间 */                
 9                 -webkit-transform: scale(0.5);
10                 -ms-transform: scale(0.5);
11                 -o-transform: scale(0.5);
12             }

这是效果图:下图表示,原图和被缩小0.5倍后的效果图

     

       

 

3)倾斜(skew)

1 /* HTML */
2 <div class="div3">我只是一个示例</div>
 1 /* CSS */
 2     .div3 {
 3                 width: 412px;
 4                 height: 208px;
 5                 font-size: 20px;
 6                 margin: 100px auto;
 7                 background: url(img/4.jpg);
 8                 -moz-transform: skew(30deg, 30deg);/* 倾斜属性,参数分别表示x,y方的倾斜角度,负数逆时针,正数顺时针 */    
 9                 -webkit-transform: skew(30deg, 30deg);    
10                 -ms-transform: skew(30deg, 30deg);
11                 -o-transform: skew(30deg, 30deg);
12             }

这是效果图:下图表示一张正图经过 x方向上顺时针旋转30度,y方向顺时针旋转30度后的效果。

 

4)移动(translate)

1 /* HTML */
2 <div class="div4">我只是一个示例</div>
 1 /* CSS */
 2      .div4 {
 3                 width: 612px;
 4                 height: 408px;
 5                 font-size: 20px;
 6                 margin: 100px auto;
 7                 background: url(img/4.jpg);
 8                 -moz-transform: translate(100px);/* 移动属性 ,移动方向是在div这个平面方向上,*/                
 9                 -webkit-transform: translate(100px);
10                 -ms-transform: translate(100px);
11                 -o-transform: translate(100px);
12             }

我在写的时候,这个移动,单一用的话,真看不出什么效果,单一运用写出来的效果真的不尽人意,下面我们直接把四个属性组合起来,一起用,写一个看着逼格稍稍高点的效果,以往看着别的网站有这个效果,当时

觉得真不错,这两天有时间就把它写出来,呵呵,来看看吧!

 

5)整合:旋转、缩放、倾斜和移动。

首先了,我们要先敲出一个水平方向上的水平面,看着有点像四维的咯!

1 /* HTML */
2 <div class="div5">我只是一个示例</div>
 1 /* CSS */
 3     .div5 {
 4                 width: 612px;
 5                 height: 408px;
 6                 font-size: 20px;
 7                 color: #FFFFFF;
 8                 margin: 100px auto;
 9                 background: url(img/907878604.jpeg);
10                 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋转-缩放-倾斜-移动 */
11                 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
12                 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
13                 -o-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
14                 box-shadow: -15px 7px 10px 3px #444;
15                 float: left;
16                 position: relative;
17                 left: 30%;
18                 
19             }

看看效果,是有点丑了!呵呵,如果配上一个3D背景,我相信效果会更好,视觉效果会更强

 

下面我们再写两个,复制修改下代码,再看看

1 /* HTML */
2 <div class="div5_1">我只是一个示例</div>
3 <div class="div5_2">我只是一个示例</div>
 1 /* CSS */
 2    .div5_1 {
 3                 width: 612px;
 4                 height: 408px;
 5                 font-size: 20px;
 6                 color: #FFFFFF;
 7                 margin: 40px auto;
 8                 background: url(907878604.jpeg);
 9                 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋转-缩放-倾斜-移动 */
10                 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
11                 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
12                 box-shadow: -15px 7px 10px 3px #444;
13                 position: absolute;
14                 left: 30%;
15             }
16     .div5_2 {
17                 width: 612px;
18                 height: 408px;
19                 font-size: 20px;
20                 color: #FFFFFF;
21                 margin: -20px auto;
22                 background: url(img/907878604.jpeg);
23                 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋转-缩放-倾斜-移动 */
24                 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
25                 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
26                 box-shadow: -15px 7px 10px 3px #444;
27                 position: absolute;
28                 left: 30%;
29             }

 

看着是不是空间感更强了,如果你细心研究,写在页面上的话,再加一些事件、色彩在它上面,我相信,视觉冲击力就上来了。

 

总结:transform的几个属性用法就是这样的,前端的各种特效,都是自己慢慢细心研究出来的,特效嘛,就像拍电影一样,要投入时间和精力,你做出来的东西才会耳目一新,页面给用户的视觉感,色彩感才会更强。这是关于CSS3的动画、阴影的一个地址,可以参考学习下http://www.css3maker.com/

 

 

交流群:192713488

转载于:https://www.cnblogs.com/webonline/p/6077198.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/373443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宏的用法与简介

预处理指令&#xff1a;例如&#xff1a;#include<stdio.h> #include<stdlib.h> #define MAX 20 ............. 因为他们由预处理器解释的&#xff0c;所以称作预处理指令。预处理器读取源代码&#xff0c;然后对其修改&#xff0c;并把修改过的…

django 日志写入mysql_如何将django orm模型 写入数据库

1、指定连接pymysql(python3.x)先配置_init_.pyimport pymysqlpymysql.install_as_MySQLdb()2、配置连接mysql文件信息settings.pyDATABASES {default: {ENGINE: django.db.backends.mysql,NAME: django_orm, #你的数据库名称USER: root, #你的数据库用户名PASSWORD: , #你的数…

ORM的问题第2部分–查询

在我以前关于对象关系映射工具&#xff08;ORM&#xff09;的帖子中&#xff0c;我讨论了在处理当今常见的ORM&#xff08;包括Hibernate&#xff09;时遇到的各种问题。 其中包括与从POJO生成架构有关的问题&#xff0c;实际性能和不断出现的维护问题。 本质上&#xff0c;结论…

【转】如何减少接口响应时间

Premature optimization is the root of all evil. — Donald Knuth 对于程序优化&#xff0c;我一直采取保守的态度&#xff0c;除非万不得已。但是随着业务的不断发展&#xff0c;程序越来越复杂&#xff0c;代码越写越多&#xff0c;优化似乎是终有一天会到来的事情。 那么对…

数据库行转列在现实需求中的用法

select t.客户姓名,sum(case when t.收款类型首款 then t.金额 else 0 end as 首款),sum(case when t.收款类型尾款 then t.金额 else 0 end as 尾款) from table t group by t.客户姓名 这段sql的意思 是 查询出所有客户收款信息 然后按客户分组 分组后 然后将这个客户的所…

mysql生产环境加索引_【生产篇】_MySQL环境下如何查看基于表的索引定义

【引言】今天中午项目组来一需求&#xff0c;欲在MySQL环境的某张表下创建几个BTREE索引。要创建索引&#xff0c;首先需要了解基表的表结构&#xff0c;以及已经包含的索引。Oracle的表结构大家都很熟悉&#xff0c;但MySQL表结构和已创建索引的查看怎么操作&#xff0c;本文将…

Hadoop模式介绍-独立,伪分布式,分布式

了解了什么是Hadoop之后&#xff0c;让我们在单机上启动Hadoop&#xff1a; 这篇文章包含在ubuntu上安装Hadoop的说明。 这是Hadoop安装的快速分步教程。 在这里&#xff0c;您将获得以独立模式 &#xff08;单节点集群&#xff09;安装Hadoop所需的所有命令及其说明&#xff0…

apk反编译方式

一、Apk反编译得到Java源代码 下载上述反编译工具包&#xff0c;打开apk2java目录下的dex2jar-0.0.9.9文件夹&#xff0c;内含apk反编译成java源码工具&#xff0c;以及源码查看工具。 apk反编译工具dex2jar&#xff0c;是将apk中的classes.dex转化成jar文件 源码查看工具jdgui…

优化Hibernate所鼓励的7大措施

优化Hibernate所鼓励的7大措施&#xff1a; 1.尽量使用many-to-one&#xff0c;避免使用单项one-to-many2.灵活使用单向one-to-many3.不用一对一&#xff0c;使用多对一代替一对一4.配置对象缓存&#xff0c;不使用集合缓存5.一对多使用Bag 多对一使用Set6.继承使用显示多态 HQ…

如何用c 控制mysql数据库_用C语言操作MySQL数据库

函数描述mysql_affected_rows()返回上次UPDATE、DELETE或INSERT查询更改&#xff0f;删除&#xff0f;插入的行数。mysql_autocommit()切换autocommit模式&#xff0c;ON/OFFmysql_change_user()更改打开连接上的用户和数据库。mysql_charset_name()返回用于连接的默认字符集的…

数据结构(RMQ):POJ 3624 Balanced Lineup

Balanced LineupDescription For the daily milking, Farmer Johns N cows (1 ≤ N ≤ 50,000) always line up in the same order. One day Farmer John decides to organize a game of Ultimate Frisbee with some of the cows. To keep things simple, he will take a conti…

Apache Thrift快速入门教程

Thrift是一种跨语言RPC框架&#xff0c;最初是在Facebook上开发的&#xff0c;现在作为Apache项目开源。 这篇文章将描述如何以不同的模式&#xff08;例如阻塞&#xff0c;非阻塞和异步&#xff09;编写Thrift服务和客户端。 &#xff08;我觉得后两种模式的文档较少&#xff…

数组拆分为新数组

package com.classes;//已知数组a&#xff0c;将奇数位置元素存到b数组中&#xff0c;偶数位置元素存到c数组中public class Shuzu1118_4 { public static void main(String[] args) { int [] a{3,6,9,1,4,7,2,5,8}; int [] b; //定义数组b int [] c; //定义数组c//先找出数组…

java数组交集_java数组的交集和并集

前两天给我出了一道题&#xff0c;求数组的并集和交集&#xff0c;然后我试着写一下&#xff0c;很尴尬&#xff0c;由于长时间没有写过代码&#xff0c;一开始数组是如何定义的给忘了。当时我说了我的思路&#xff0c;不过也是很low的做法&#xff0c;查阅网上的一些资料&…

ADF声明性组件示例

在我以前的文章中&#xff0c;我答应展示如何为智能值列表创建ADF声明性组件。 因此&#xff0c;我将创建一个包含三个元素的组件&#xff1a;标签&#xff0c;输入文本和值的组合框列表。 那很容易。 我在工作空间中创建了一个单独的ADF ViewController项目&#xff1a; 在此项…

VS2015 安装包缺失(联网安装失败)问题解决

Win7 x86 测试可行 * 如果前面有尝试过安装不成功, 一定要用卸载程序删除已安装的部分,否则会出乱子. 1. 或者是用虚拟光驱加载ISO, 或者是解压到硬盘上, 都没有关系. 2. 用管理员权限启动CMD控制台, 进入VS2015 安装盘的根目录 (vs_enterprise.exe 所在的目录). 3. 执行命令 …

java蓝桥暑假班_Java实现 蓝桥杯VIP 算法提高 班级排名

算法提高 班级排名时间限制&#xff1a;1.0s 内存限制&#xff1a;256.0MB问题描述达达在陶陶的影响下&#xff0c;也对学习慢慢的产生了兴趣。他在每次考试之后&#xff0c;都会追着老师问&#xff0c;自己在班级的总名次是多少。考试一多&#xff0c;老师也不耐烦了&#xff…

$.ajax所犯的错误。success后面不执行

$.ajax({ type: post, url: ../AshxHandler/HandlerAddPhoto.ashx, data: { clientPath: photoName }, dataType: text, cache: false, success: function (data) { alert(1); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(上传图片出现错误&#xf…

WhateverOrigin –与Heroku和Play对抗相同的原产地政策! 构架

不久前&#xff0c;我在编码 Bitcoin Pie时发现需要克服臭名昭著的Same Origin Policy &#xff0c;该政策限制了运行在客户端浏览器上的javascript可以访问的域。 通过Stack Overflow&#xff0c;我找到了一个名为Any Origin的站点&#xff0c;这基本上是无需设置专用服务器即…

Solr集群更新配置的方式

solr集群中配置文件是经常更新的&#xff0c;频率最高的也就是schema.xml和solrconfig.xml这两个配置文件了&#xff0c;对于更新配置文件之前&#xff0c;我们先了解一下集群项目结构 由于在集群模式下&#xff0c;solrconfig.xml和schema.xml等配置文件都由Zookeeper集群管理…