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


Posted in HTML / CSS onMarch 19, 2020

一、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两个方向的缩放倍数是一样的(同时放大相同倍数)。

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3缩放scale()用法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        .main
        {
            margin:100px auto;/*水平居中*/
            width:300px;
            height:200px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #3water
        {
            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="3water">三水点靠木1</div>
    </div>
    <div class="main">
        <div id="jbzj">三水点靠木2</div>
    </div>
</body>
</html>

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

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

分析:

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

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

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

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

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

通过rotate()实现旋转功能

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

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

HTML代码:

<div class="wrapper">
  <div></div>
</div>

CSS代码:

.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);
}

演示结果

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

而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样式

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放大、旋转的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 #HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 #HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 #HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 #HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 #HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 #HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 #HTML / CSS
You might like
php中使用url传递数组的方法
2015/02/11 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
javascript变量声明实例分析
2015/04/25 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
Python单元测试实例详解
2018/05/25 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
外贸业务员的岗位职责
2013/11/23 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
教师聘用意向书
2015/05/11 职场文书
大学生入党群众意见书
2015/06/02 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
Python中文纠错的简单实现
2021/07/07 Python
Python基本知识点总结
2022/04/07 Python
python中 .npy文件的读写操作实例
2022/04/14 Python
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL