CSS3新增特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:4019

css 前端 css3
{}
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>

原文地址：https://blog.csdn.net/weixin_52629158/article/details/130180766?ops_request_misc=&request_id=4ac4022a84dd49759bfec91d9092784e&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-6-130180766-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/eb5295c130a7411399395ed08d6d6697

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号