【CSS3新加属性】形变

最新推荐文章于 2024-07-25 16:45:46 发布

byte~

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量87

点赞数

文章标签：动画 css css3

本文链接：https://blog.csdn.net/qq_45929209/article/details/121685316

版权

形变

形变（transform）
定义复杂变形

形变（transform）

用于内联或者块元素，可以旋转、缩放、移动元素
Webkit：-webkit-transform
Gecko：-moz-transform
Presto：-o-transform
提示：以上三种，效果都用一样，只是不同浏览器会要求使用不同的，但Webkit都适用（除IE）
IE：暂不支持
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				margin: 100px;
				background-image: url(images/1.png);
				width: 200px;
				height: 100px;
				-webkit-transition: -webkit-transform 2s ease-in;
				-moz-transition: -moz-transform 2s ease-in;
				-o-transition: -o-transform 2s ease-in;
				-transition: -transform 2s ease-in;
			}
			
			div:hover {
				/*-webkit-transform: rotate(180deg);旋转*/
				/*-webkit-transform: scale(2, 0.5);缩放*/
				/*-webkit-transform: translate(200px,100px);平移*/
				/*-webkit-transform:skew(15deg,15deg);倾斜*/
				-webkit-transform: rotate(180deg) scale(2, 0.5);/*既旋转又缩放*/
				-moz-transform: rotate(180deg) scale(2, 0.5);
				-o-transform: rotate(180deg) scale(2, 0.5);
				-transform: rotate(180deg) scale(2, 0.5);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

定义复杂变形

除了transform，背景颜色，颜色，宽度都可以成为变形。
代码如下（示例）：

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="UTF-8">
   	<title></title>
   	<style type="text/css">
   		div {
   			background-color: red;
   			width: 30%;
   			height: 80px;
   			color: #FFF;
   			font-size: 60px;
   			-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
   			-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
   			-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
   			-transition: background-color 1s linear, color 1s linear, width 1s linear;
   		}
   		
   		div:hover {
   			background-color: #003366;
   			color: #0F0;
   			width: 100%;
   		}
   	</style>
   </head>
   <body>
   	<div>12345</div>
   </body>
</html>

项目实战

byte~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS3新加属性】形变

形变形变（transform）定义复杂变形形变（transform）用于内联或者块元素，可以旋转、缩放、移动元素Webkit：-webkit-transformGecko：-moz-transformPresto：-o-transform提示：以上三种，效果都用一样，只是不同浏览器会要求使用不同的，但Webkit都适用（除IE）IE：暂不支持代码如下（示例）：<!DOCTYPE html><html> <head> <meta ch
复制链接

扫一扫