rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。您可以使用 2D 或 3D 转换来转换您的元素。转换的效果是让某个元素改变形状,大小和位置。1.1.1 css3中2D转换动画效果。CSS3 转换可以对元素进行。
CSS3 转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
它是如何工作?
转换的效果是让某个元素改变形状,大小和位置。
您可以使用 2D 或 3D 转换来转换您的元素。
1.1.1 css3中2D转换动画效果
2D变换方法:
translate()
rotate()
cale()
kew()
matrix()
转换属性
2D变换方法
1.1.1.1 translate(x,y) 移动
语法:
transform:translate(<x> [,<y>]);
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
margin:10px auto;
/* 过渡动画 */
transition:all 0.5s;
}
.box:hover{
/* 移动 */
/* transform: translate(50px,0); */
/* transform:translate(0,50px); */
/* transform: translateX(50px); */
transform: translateY(50px);
}
</style>
</head>
<body>
<div class="box"></div>
1.1.1.2 scale(x,y) 缩放
语法:
transform:skew(<x> [,<y>]);
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
margin:10px auto;
/* 过渡动画 */
transition:all 0.5s;
}
.box2:hover{
/* 缩放 */
/* transform:scale(50%,40%); */
/* transform: scale(2,3); */
/* transform:scaleX(0.5); */
transform:scaleY(0.2);
}
</style>
</head>
<body>
<div class="box box2"></div>
1.1.1.3 rotate(angle) 转动
语法:
transform:rotate(<angle>);
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
<style>
.box{
width: 200px;
height: 200px;
background-image: linear-gradient(to left,red,blue);
margin:10px auto;
/* 过渡动画 */
transition:all 0.5s;
}
.box:hover{
/* 旋转 */
/* transform: rotate(360deg); */
/* transform: rotate(-180deg); */
transform: rotate(0.5turn);
}
</style>
</head>
<body>
<div class="box box3"></div>
1.1.1.4 skew(x-angle,y-angle) 拉长或拉伸
语法:
<style>
.box{
width: 200px;
height: 200px;
background-color:red;
margin:10px auto;
/* 过渡动画 */
transition:all 0.5s;
}
.box:hover{
/* 拉伸 */
/* transform:skew(30deg,20deg); */
/* transform: skewX(30deg); */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div class="box box4"></div>
本站为非盈利网站,如果您喜欢这篇文章,欢迎支持我们继续运营!
本站主要用于日常笔记的记录和生活日志。本站不保证所有内容信息可靠!(大多数文章属于搬运!)如有版权问题,请联系我立即删除:“abcdsjx@126.com”。
QQ: 1164453243
邮箱: abcdsjx@126.com