CSS3的transform属性

最新推荐文章于 2022-06-01 13:46:57 发布

碑无名

最新推荐文章于 2022-06-01 13:46:57 发布

阅读量179

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/deep_zhuheihei/article/details/116720621

版权

前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #B22222;
				width: 200px;
				height: 200px;
				transition: all 2s;
			}
			div:hover{
				        /* transform: scaleX(-1); */
                          /* 在Yz轴上产生镜像 */
                        
                        /* transform: scale(1,0.5);  元素同时缩放x，y
                       
                        transform: scaleX(1);     仅在X轴反向上缩放
                        
                        transform: scaleY(0.5);   仅在Y轴方向上缩放 */
                        /* 注意：transform: scale()不指定第二个参数时，第二个参数值默认和第一个参数值一样 */
                       
                        
                        
                        
                        /* transform: translate(100px,20px); //在X轴和Y轴正方向上移动 */
                        
                        /* transform: translateX(100%);     //仅在X轴正方向上移动 */
                       
                        /* transform: translateY(20px);      //仅在Y轴正方向上移动
                       
                        transform: translateX(100%)       //百分比是基于本元素的宽度（width+padding+border）
                       
                        transform: translateY(100%)       //百分比是基于本元素的高度（同理） */
                        /* 注意：transform: translate()不指定第二个参数时，第二个参数默认为0 */
                         
                         
                         
                         transform: skew(20deg,30deg);  //元素在X，Y轴倾斜30度 
                        
                        /* transform: skewX(20deg);       //仅在X轴上倾斜20度  */
                        
                        /* transform: skewY(30deg);       //仅在Y轴上倾斜30度   */
                        /* transform: skew()没有第二个参数时，第二个参数默认为0
                        X轴是垂直方向，Y轴是水平方向
                        正值是逆时针倾斜 */

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

碑无名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3的transform属性

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ background-color: #B22222; width: 200px; height: 200px; transition: all 2s; } div:ho
复制链接

扫一扫