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 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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单态设计模式(单例模式)实例
2014/11/18 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python批量提交沙箱问题实例
2014/10/08 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
python3中布局背景颜色代码分析
2020/12/01 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript