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

网页制作 2024/11/17 佚名

3 1 2

一、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;
        }
        /*设置当前元素样式*/
        #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代码：

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

演示结果

而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放大、旋转的资料请关注其它相关文章！

css3旋转,css3放大

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“css3通过scale()、rotate()实现放大、旋转”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

关于CSS中定位的小结

CSS3属性 line-clamp控制文本行数的使用

评论“css3通过scale()、rotate()实现放大、旋转”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接