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 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
HTML中link标签属性的具体用法
May 07 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编程中八种常见的文件操作方式
2006/11/19 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
JS前端笔试题分析
2016/12/19 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
小程序云开发实战小结
2018/10/25 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
python中time包实例详解
2021/02/02 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
如何进行Linux分区优化
2013/02/12 面试题
儿科护士自我鉴定
2013/10/14 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
回复函范文
2015/07/14 职场文书
Python词云的正确实现方法实例
2021/05/08 Python