Css属性transform详解（变形、旋转、缩放）

最新推荐文章于 2024-05-29 01:06:24 发布

宝子向前冲

最新推荐文章于 2024-05-29 01:06:24 发布

阅读量1.2k

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_66570642/article/details/138998246

版权

变形

变形(transform)的简介

1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的

常用属性(transform)

 1.transform: translateX():沿着x轴平移;
 2.transform: translateY():沿着Y轴平移;
 3.transform: translateX():沿着Z轴平移;

1.Z轴平移，调整元素在Z轴的位置，正常情况就是调整元素和人眼之间的距离,距离越大，元素离人越近 2.Z轴平移属于立体效果(近大远小)，默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

代码格式

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         html{
             /* 设置当前网页的视距为800px，人眼距离网页的距离 */
             perspective: 800px;
         }
         .box1{
          width: 400px;
          height: 400px;
          margin: 0 auto;
          margin-top: 200px;
            background-color: silver;
         } 
         .box2{
             width: 150px;
             height: 200px;
             background-color:skyblue;          
             margin: 0 auto;
             
         }
         .box2:hover{
            transform: translateZ(200px);
         }
     </style>
 </head>
 <body>
     <div class="box1">
         <div class="box2"></div>
     </div>
    
 </body>
 </html>

旋转

旋转(transform)的简介

1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)

常用属性

1.rotateX()沿着x轴旋转;

2.rotateY()沿着Y轴旋转;

3.rotateZ()沿着Z轴旋转;

代码格式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         html{
             perspective: 800px;
         }
         .box1{
          width: 200px;
          height: 200px;
          margin: 0 auto;
          margin-top: 200px;
          background-color: silver;
          /* transform: rotateX();
          transform: rotateY();
          transform: rotateZ(); */
          transition: all 2s;
         } 
         /* .box2{
             width: 150px;
             height: 200px;
             background-color:skyblue;          
             margin: 0 auto;
             
         } */
         .box1:hover{
             transform: rotateY(180deg) translateZ(400px);
         }
      
     </style>
 </head>
 
 <body>
     <div class="box1"></div>
     <div class="box2"></div>
 </body>
 </html>

缩放(transform)

常用属性

transform-origin: 0 0;设置变形的原点默认值(center)

 `scaleX(2)`沿着X轴放大两倍;
 
 `scaleX(.2)`沿着X轴缩小两倍;
 
 `scaleY(2)`沿着Y轴放大两倍;
 
 `scaleY(.2)`沿着Y轴缩小两倍;
 
 `scale(2)`沿着Y轴和X轴放大两倍;
 
 `scale(.2)`沿着Y轴和X轴缩小两倍;

代码格式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         .box1{
             width: 100px;
             height: 100px;
             background-color: #bfa;
             transition: 2s;
             margin: 100px auto;
         }
         .box1:hover{
             transform: scale(2);
         }
        .img-wrapper{
            margin: 100px auto;
             width: 200px;
             height: 200px;
             /* border: 1px red solid; */
             overflow: hidden;
            
         }
         img{
             transition: .8s;
         }
         .img-wrapper:hover img{
             transform: scale(1.2);
         }
     </style>
 </head>
 <body>
     <div class="box1"></div>
     <div class="img-wrapper">
         <img src="./beauty_image/3.jpg" width="100%" height="100%">
     </div>
 </body>
 </html>

宝子向前冲

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Css属性transform详解（变形、旋转、缩放）

1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
复制链接

扫一扫