• 技术文章 >web前端 >前端问答

    在css3中可实现缩放效果的是什么属性

    青灯夜游青灯夜游2022-04-25 15:51:33原创227

    在css3中可实现缩放效果的是transform属性。transform属性可以和scaleX()函数实现水平方向的缩放效果、可以和scaleY()函数实现垂直方向的缩放效果、可和“scale(x,y)”函数实现水平方向和垂直方向同时缩放。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css3中可实现缩放效果的是transform属性。

    transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

    transform属性配合缩放方法可以将元素根据中心原点进行缩放。

    css3缩放方法有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>
    	<head>
    		<title>CSS3缩放scale()用法</title>
    		<style type="text/css">
    			*,
    			*:after,
    			*:before {
    				box-sizing: border-box;
    			}
    
    			body {
    				background: #F5F3F4;
    				margin: 0;
    				padding: 10px;
    				font-family: 'Open Sans', sans-serif;
    				text-align: center;
    			}
    
    			h1 {
    				color: #4c4c4c;
    				font-weight: 600;
    				border-bottom: 1px solid #ccc;
    			}
    
    			h2,
    			h4 {
    				font-weight: 400;
    				color: #4d4d4d;
    			}
    
    			.card {
    				display: inline-block;
    				margin: 10px;
    				background: #fff;
    				padding: 15px;
    				min-width: 200px;
    				box-shadow: 0 3px 5px #ddd;
    				color: #555;
    			}
    
    			.card .box {
    				width: 100px;
    				height: 100px;
    				margin: auto;
    				background: #ddd;
    				cursor: pointer;
    				box-shadow: 0 0 5px #ccc inset;
    			}
    
    			.card .box .fill {
    				width: 100px;
    				height: 100px;
    				position: relative;
    				background: #03A9F4;
    				opacity: .5;
    				box-shadow: 0 0 5px #ccc;
    				-webkit-transition: 0.3s;
    				transition: 0.3s;
    			}
    
    			.card p {
    				margin: 25px 0 0;
    			}
    
    
    
    			.scale:hover .fill {
    				-webkit-transform: scale(2, 2);
    				transform: scale(2, 2);
    			}
    
    			.scaleX:hover .fill {
    				-webkit-transform: scaleX(2);
    				transform: scaleX(2);
    			}
    
    			.scaleY:hover .fill {
    				-webkit-transform: scaleY(2);
    				transform: scaleY(2);
    			}
    		</style>
    	</head>
    	<body>
    		<!-- scale-->
    		<div class="card">
    			<div class="box scale">
    				<div class="fill"></div>
    			</div>
    			<p>scale(2)</p>
    		</div>
    		<div class="card">
    			<div class="box scaleX">
    				<div class="fill"></div>
    			</div>
    			<p>scaleX(2) </p>
    		</div>
    		<div class="card">
    			<div class="box scaleY">
    				<div class="fill"></div>
    			</div>
    			<p>scaleY(2) </p>
    		</div>
    	</body>
    </html>

    1.gif

    (学习视频分享:css视频教程web前端

    以上就是在css3中可实现缩放效果的是什么属性的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3
    上一篇:es6的解构是什么意思 下一篇:es6怎么用reduce求和
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css3中rotateX旋转方向是什么• css3层次选择器的用法是什么• css3清除浮动的几种方式是什么• css3线性渐变可以实现三角形吗• css3新增伪类选择器有哪些
    1/1

    PHP中文网