devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例_transform 移动

作者：不正经 | 2024-03-18 23:53:16

赞

踩

transform 移动

目录

一、transform基础介绍_平面移动

二、transform基础介绍_平面旋转

三、transform基础介绍_平面缩放

四、transform基础介绍_空间移动（3D转换）

五、transform基础介绍_空间旋转（3D转换） 

1、三轴旋转

2、左手法则 

3、自定义旋转轴

六、transform基础介绍_空间缩放（3D转换） 

一、transform基础介绍_平面移动

transform: translate(水平移动距离，垂直移动距离);        //距离的取值可以是数字或百分比

  • 向右向下为正数，向左向上为负数
  • 括号内只填一个值，默认为水平方向移动的距离
  • transform:translateX()  水平移动距离
  • transform:translateY()  垂直移动距离

transition 过渡效果（简单介绍）

transition: all 1s;        //表示该元素的所有属性改变效果延时1秒

示例动画（运用hover、定位、位移、过渡组合实现）：

 完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .box {
  11.             position: relative;
  12.             margin: 100px auto;
  13.             width: 400px;
  14.             height: 400px;
  15.             background-color: skyblue;
  16.             overflow: hidden;
  17.         }
  18.         
  19.         .son1,
  20.         .son2,
  21.         .son3,
  22.         .son4 {
  23.             position: absolute;
  24.             transition: all 1s;
  25.         }
  26.         
  27.         .son1 {
  28.             left: -380px;
  29.             width: 380px;
  30.             height: 20px;
  31.             background-color: red;
  32.         }
  33.         
  34.         .son2 {
  35.             top: -380px;
  36.             left: 380px;
  37.             width: 20px;
  38.             height: 380px;
  39.             background-color: yellow;
  40.         }
  41.         
  42.         .son3 {
  43.             top: 380px;
  44.             left: 400px;
  45.             width: 380px;
  46.             height: 20px;
  47.             background-color: green;
  48.         }
  49.         
  50.         .son4 {
  51.             top: 400px;
  52.             width: 20px;
  53.             height: 380px;
  54.             background-color: blue;
  55.         }
  56.         
  57.         .box:hover .son1 {
  58.             transform: translate(380px);
  59.         }
  60.         
  61.         .box:hover .son2 {
  62.             transform: translateY(380px);
  63.         }
  64.         
  65.         .box:hover .son3 {
  66.             transform: translate(-380px);
  67.         }
  68.         
  69.         .box:hover .son4 {
  70.             transform: translateY(-380px);
  71.         }
  72.     </style>
  73. </head>
  74.  
  75. <body>
  76.     <div class="box">
  77.         <div class="son1"></div>
  78.         <div class="son2"></div>
  79.         <div class="son3"></div>
  80.         <div class="son4"></div>
  81.     </div>
  82.  
  83. </body>
  84.  
  85. </html>

二、transform基础介绍_平面旋转

transform:rotate(角度)        角度单位：deg

  • 正数：顺时针        负数：逆时针
  • 需要搭配transition才能看见旋转的效果
  • 默认旋转中心为盒子的中心位置

如果要改变旋转中心的话，需要通过 transform-origin 来实现

transform-origin: 中心点的水平位置  中心点的垂直位置;

  • 取值可以是  数字+px
  • 百分比
  • 方向英文名，left……

 示例效果：运用hover+定位+旋转+中心点组合实现

 完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .box {
  11.             position: relative;
  12.             margin: 100px auto;
  13.             width: 400px;
  14.             height: 400px;
  15.             transform: rotate(-90deg);
  16.         }
  17.         
  18.         .son1,
  19.         .son2,
  20.         .son3,
  21.         .hid {
  22.             position: absolute;
  23.             transition: all 1s;
  24.             transform-origin: right;
  25.         }
  26.         
  27.         .sun1,
  28.         .sun2,
  29.         .sun3,
  30.         .min {
  31.             position: absolute;
  32.             border-radius: 50%;
  33.         }
  34.         
  35.         .son1 {
  36.             top: 25%;
  37.             left: 25%;
  38.             width: 100px;
  39.             height: 200px;
  40.             border-radius: 100px 0px 0 100px;
  41.             background-color: red;
  42.             z-index: 2;
  43.         }
  44.         
  45.         .sun1 {
  46.             left: 75px;
  47.             width: 50px;
  48.             height: 50px;
  49.             background-color: red;
  50.         }
  51.         
  52.         .son2 {
  53.             top: 50px;
  54.             left: 50px;
  55.             width: 150px;
  56.             height: 300px;
  57.             border-radius: 150px 0px 0 150px;
  58.             background-color: green;
  59.             z-index: 1;
  60.         }
  61.         
  62.         .sun2 {
  63.             left: 125px;
  64.             width: 50px;
  65.             height: 50px;
  66.             background-color: green;
  67.         }
  68.         
  69.         .son3 {
  70.             width: 200px;
  71.             height: 400px;
  72.             border-radius: 200px 0px 0 200px;
  73.             background-color: blue;
  74.         }
  75.         
  76.         .sun3 {
  77.             left: 175px;
  78.             width: 50px;
  79.             height: 50px;
  80.             background-color: blue;
  81.         }
  82.         
  83.         .hid {
  84.             width: 200px;
  85.             height: 400px;
  86.             background-color: rgb(255, 255, 255);
  87.             z-index: 3;
  88.         }
  89.         
  90.         .min {
  91.             right: -50px;
  92.             top: 150px;
  93.             width: 100px;
  94.             height: 100px;
  95.             background-color: rgb(255, 255, 255);
  96.         }
  97.         
  98.         .box:hover .son1,
  99.         .box:hover .son2,
  100.         .box:hover .son3 {
  101.             transform: rotate(180deg);
  102.         }
  103.     </style>
  104. </head>
  105.  
  106. <body>
  107.     <div class="box">
  108.         <div class="son1">
  109.             <div class="sun1"></div>
  110.         </div>
  111.         <div class="son2">
  112.             <div class="sun2"></div>
  113.         </div>
  114.         <div class="son3">
  115.             <div class="sun3"></div>
  116.         </div>
  117.         <div class="hid">
  118.             <div class="min"></div>
  119.         </div>
  120.     </div>
  121.  
  122. </body>
  123.  
  124. </html>

三、transform基础介绍_平面缩放

transform: scale(横轴缩放倍数, 竖轴缩放倍数);

  • 括号内可以只设置一个值，意为整体等比缩放

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .pic {
  11.             margin: 200px auto;
  12.             width: 100px;
  13.             height: 100px;
  14.             background-color: skyblue;
  15.             transition: all 0.5s;
  16.         }
  17.         
  18.         .pic:hover {
  19.             transform: scale(3);
  20.         }
  21.     </style>
  22. </head>
  23.  
  24. <body>
  25.     <div class="pic"></div>
  26. </body>
  27.  
  28. </html>

 四、transform基础介绍_空间移动（3D转换）

        空间转换时在平面的X轴、Y轴基础上增加了Z轴方向

  • transform: translate3d(x值,y值,z值);

  • transform: translateZ( )

  • 在Z轴上移动正常情况下是看不出效果的，需要配合 perspective:数字px;使用

perspective  为透视属性，也就是实现近大远小的效果，只有这样，Z轴方向的移动效果才能显示出来，取值的大小就相当于人眼与屏幕的远近。

  • 一般情况下取值范围是  800px-1200px（此范围内的效果最好，可以试试范围外的效果如何）

示例如图（沿Z轴移动）：

 

 完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         body {
  11.             perspective: 1000px;
  12.         }
  13.         
  14.         .box {
  15.             width: 100px;
  16.             height: 100px;
  17.             margin: 200px auto;
  18.             background-color: red;
  19.             transition: all 1s;
  20.         }
  21.         
  22.         .box:hover {
  23.             transform: translateZ(200px)
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <div class="box"></div>
  30. </body>
  31.  
  32. </html>

五、transform基础介绍_空间旋转（3D转换） 

1、三轴旋转

transform: rotateX();        沿着X轴（水平方向）旋转

transform: rotateY();        沿着Y轴（垂直方向）旋转

transform: rotateZ();        沿着Z轴旋转，等同于平面旋转

 效果展示：

X轴 Y轴 Z轴
X轴                                              Y轴                                                     Z轴

 完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .box {
  11.             width: 900px;
  12.             position: absolute;
  13.             top: 50%;
  14.             left: 50%;
  15.             transform: translate(-50%, -50%);
  16.             perspective: 1000px;
  17.         }
  18.         
  19.         img {
  20.             margin: 30px;
  21.             width: 200px;
  22.             transition: all 1s;
  23.         }
  24.         
  25.         .p1:hover {
  26.             transform: rotateX(90deg);
  27.         }
  28.         
  29.         .p2:hover {
  30.             transform: rotateY(90deg);
  31.         }
  32.         
  33.         .p3:hover {
  34.             transform: rotateZ(90deg);
  35.         }
  36.     </style>
  37. </head>
  38.  
  39. <body>
  40.     <div class="box">
  41.         <img class="p1" src="./4a72b556cf1deda73ac0ce.jpg" alt="">
  42.         <img class="p2" src="./4a72b556cf1deda73ac0ce.jpg" alt="">
  43.         <img class="p3" src="./4a72b556cf1deda73ac0ce.jpg" alt="">
  44.     </div>
  45. </body>
  46.  
  47. </html>

2、左手法则 

        通过旋转的方向，左手握住旋转轴，大拇指指向的时该轴的正方向（移动正值），手指弯曲的方向为旋转正方向（旋转正值）。

3、自定义旋转轴

transform: rotate3d(x,y,z,角度);        

  • x,y,z的取值范围是 0-1之间
  • rotate3d会根据自己的算法，计算出旋转轴

 如图，图片会以一条不常见的轴体进行旋转：

 代码如下：

transform: rotate3d(0.3, 0.4, 0.5, 90deg);

六、transform基础介绍_空间缩放（3D转换） 

transform: scaleX(倍数);        //宽度变化

transform: scaleY(倍数);        //高度变化

transform: scaleZ(倍数);        //厚度变化

transform: scale3d(x,y,z);

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/266238
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号