首页

css3通过scale()、rotate()实现放大、旋转

前端达人

css3通过scale()实现放大功能、通过rotate()实现旋转功能,下面有个示例,大家可以参考下

一、scale()方法

缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放。

跟translate()方法一样,缩放scale()方法也有3种情况:

(1)scaleX(x):元素仅水平方向缩放(X轴缩放);
(2)scaleY(y):元素仅垂直方向缩放(Y轴缩放);
(3)scale(x,y):元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放);

1、scaleX(x)

语法:

transform:scaleX(x)

说明:

x表示元素沿着水平方向(X轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。
大家想想倍数是怎样一个概念就很好理解了。

2、scaleY(y)

语法:

transform:scaleY(y)

说明:

y表示元素沿着垂直方向(Y轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。

3、scale(x,y)

语法:

transform:scale(x,y)

说明:

x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。

举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<head>
    <title>CSS3缩放scale()用法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        .main
        {
            margin:100px auto;/*水平居中*/
            width:300px;
            height:200px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #jb51
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:scaleX(1.5);
            -webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:scaleX(1.5);     /*兼容-moz-引擎浏览器*/
        }
        /*普通方便对比*/
         #jbzj
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="jb51">脚本之家1</div>
    </div>
    <div class="main">
        <div id="jbzj">脚本之家2</div>
    </div>
</body>
</html>

在chrome浏览器预览效果如下:

分析:

从上图可以看出,元素沿着X轴方向放大了1.5倍(两个方向同时延伸,整体放大1.5倍)。

transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/

当使用上面代码时,在浏览器预览效果如下:

css3通过scale()实现放大功能

通过rotate()实现旋转功能

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。如下图所示:

HTML代码:

1
2
3
<div class="wrapper">
  <div></div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

演示结果

而transition则可设置元素变化所需的时间

html中的结构代码

<ul>
<li><img src="image/1.jpg" ></li>
<li><img src="image/2.jpg" ></li>
<li><img src="image/3.jpg" ></li>
</ul>

css3样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul{
margin-top:50px;
list-style:none;
}
ul li{
width:200px;
height:150px;
float:left;
margin-left:10px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
}
ul li:hover{
-webkit-transform:scale(1.5) rotate(10deg);
-moz-transform:scale(1.5) rotate(10deg);
-o-transform:scale(1.5) rotate(10deg);
}
li img{
width:100%;
height:100%;
}

以上就是css3通过scale()、rotate()实现放大、旋转的详细内容,更多关于css3放大、旋转的资料请关注脚本之家其它相关文章!




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:脚本之家

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Web前端:CSS最强总结 附详细代码

前端达人

Web前端总结:
Web前端:HTML最强总结 附详细代码
Web前端:CSS最强总结 附详细代码
Web前端:JavaScript最强总结 附详细代码

基本知识

基本概念

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
层叠:多个样式可以作用在同一个html的元素上,同时生效

  • 样式定义如何显示HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个CSS很像化妆,通过不同的CSS将同样的HTML内容打造为不同的呈现结果。 所以,前端程序员相互表白的时候可以说:you are the CSS to my HTML. 这是不是CSS是对HTML进行美化和布局作用的最好总结?

优点

  1. 功能强大
  2. 将内容展示和样式控制分离
    降低耦合度。解耦
    让分工协作更容易
    提高开发效率

CSS的使用

CSS与html结合使用
根据定义CSS的位置不同,分为行内样式、内部样式和外部样式

行内样式

也称为内联样式
直接在标签中编写样式,通过使用标签内部的style属性;

代码样式:

弊端:只能对当前的标签生效,没有做到内容和样式相分离,耦合度太高。

内部样式

定义在head标签内,通过style标签,该标签内容就是CSS代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内部样式</title> <style> div{ color: red; } </style> </head> <body> <div>hello my css</div> </body> </html>

区别

  • 作用域的范围:外部样式表>内部样式表>行内样式表
  • 优先级:外部样式表<内部样式表<行内样式表;
  • 同样的样式作用在同一个标签身上:就近原则。
  • 不同样式作用在同一个标签身上,叠加生效。

CSS语法

基本格式由两个主要的部分构成:

  • 选择器
  • 一条或多条声明

基本选择器

筛选具有相似特征的元素

id选择器

选择具有相同id属性值的元素,建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

PS: ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式,但是不推荐。如果需要同样的样式对多个标签生效, 使用class选择器。

class选择器

选择具有相同的class属性值的元素。

  • class 选择器用于描述一组元素的样式,class 选择器有别于id选择器。
  • class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示

PS:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用

元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法:标签名称{};PS:标签名称必须是html提供好的标签。

使用标签选择器:自动使用在所有的同名的标签上


优先级

选择器的优先级

ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效

样式表的优先级

行内样式 > 内部样式 >外部样式

同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突, 样式叠加生效

CSS常用样式

color:字体颜色

跟颜色相关的取值分3种:

  1. 颜色的单词 red blue…
  2. rgb(红,绿,蓝)三色的取值范围是0-255 rgb(255,0,0)
    rgba(红,绿,蓝,透明度),透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
  3. #值1值2值3 :值的范式是00-FF 十六进制数字组成的 例如:#FF0000

width height:宽高

PS:只有块状元素可以设置宽高,行级元素设置不生效

取值方式有2种:

  • 数值 绝对数字 单位是像素PX
  • 百分比:占据父元素的比例

背景样式

在这里插入图片描述
在这里插入图片描述

文本样式

在这里插入图片描述

列表样式

在这里插入图片描述

边框样式

在这里插入图片描述

HTML&CSS调试利器

以谷歌浏览器为例说明。
快捷键F12或者工具条中的开发者工具调出以下内容。
在elements中可以看到当前页面的所有标签,在styles中可以看到html元素对应的样式。

交集选择器

条件:交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。

语法:h3.class{ color:red; } 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,例如div.list。

交集选择器是并且的意思。 即…又…的意思

例如: table.bg 选择的是: 类名为 .bg 的 表格标签,但用的相对来说比较少。

后代选择器

概念
后代选择器又称为包含选择器。

作用
用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,再写儿子孙子。

格式:父级 子级{属性:属性值;属性:属性值;}
语法:.class h3{color:red;font-size:16px;}

当标签发生嵌套时,内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说,它能选择任何包含在内 的标签。

子元素选择器

作用:子元素选择器只能选择作为某元素子元素(亲儿子)的元素。 其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接。
语法:.class>h3{color:red;font-size:14px;}
比如:
.demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3


转自:csdn论坛 ,

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档