transform三大属性 rotate、scale、translate

已于 2023-10-09 14:33:28 修改
阅读量1.4w 收藏 72
点赞数 19
分类专栏： css3 文章标签： html css
于 2020-09-05 10:44:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44167504/article/details/108416216
版权

transform三大属性 rotate、scale、translate

1、菜鸟教程demo：https://c.runoob.com/codedemo/3391
2、搭配 transform-orgion（动画基点）使用：https://blog.csdn.net/weixin_44167504/article/details/108418195?spm=1001.2014.3001.5501

transform三大属性：rotate(旋转) 、 scale(缩放) 、 translate(移动)
其他属性：skew(扭曲) 、 matrix(矩阵变形)
语法：transform：rotate | scale | skew | translate |matrix;

一. 移动translate
translate（）相当于水平平移，+ 表示向右/下，- 表示向左/上
translateX（x）水平方向平移
translateY（y）垂直方向平移
translateZ（z）相当于放大
translate（x,y）相当于水平平移+垂直平移
translate（x,y,z）相当于水平平移+垂直平移+放大

  1. translate（100px）实际上是水平向右平移100px

在这里插入图片描述

  1. translateX（100px）水平向右平移100px

在这里插入图片描述

  1. translateY（100px）水平向下平移100px

在这里插入图片描述

  1. translateZ（100px）相当于放大

在这里插入图片描述

  1. translate（x,y）2D平移，translate（100px,100px）右、下各平移100px

右下角
6. translate3d(20px,20px,100px) 右、下各平移20并放大
在这里插入图片描述

二. 旋转rotate效果图
rotate(angle)定义2D旋转
rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate3d(angle)定义3d旋转

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transform</title>

  <style>
    body {
      background: #F5F3F4;
      margin: 0;
      padding: 10px;
      font-family: 'Open Sans', sans-serif;
      text-align: center;
    }

    .card {
      display: inline-block;
      margin: 10px;
      background: #fff;
      padding: 15px;
      min-width: 200px;
      box-shadow: 0 3px 5px #ddd;
      color: #555;
    }

    /* 背景 */
    .card .box {
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: #ddd;
      cursor: pointer;
      box-shadow: 0 0 5px #ccc;
      -webkit-perspective: 1000px;
      -moz-perspective: 1000px;
      perspective: 1000px;
    }

    .card .box .fill {
      width: 100px;
      height: 100px;
      position: relative;
      transform-origin: center;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      background-color: skyblue;
    }

    /* rotate(45deg) */
    .rotate:hover .fill {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    /* rotateX(45deg) */
    .rotateX:hover .fill {
      -webkit-transform: rotateX(45deg);
      transform: rotateX(45deg);
    }

    /* rotateY(45deg) */
    .rotateY:hover .fill {
      -webkit-transform: rotateY(45deg);
      transform: rotateY(45deg);
    }

    /* rotateZ(45deg) */
    .rotateZ:hover .fill {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }

    /* transform: rotate3d(x,y,z,angle);*/
    /* 角度为整数表示顺时针，角度为负表示逆时针 */
    .rotate3d:hover .fill {
      -webkit-transform: rotate3d(1, 0, 1, -180deg);
      transform: rotate3d(1, 0, 1, -180deg);

    }
  </style>
</head>

<body>
  <!-- 
  transform三大属性：rotate(旋转)
                    scale(缩放)
                    translate(移动)
           其他属性：skew(扭曲)
                    matrix(矩阵变形)

               语法：transform：rotate | scale | skew | translate |matrix;
      一、旋转rotate
          rotate(angle)定义2D旋转 
          rotateX(angle)            
          rotateY(angle)            
          rotateZ(angle)            
          rotate3d(angle)定义3d旋转
          -->
  <!-- rotate(45deg) -->
  <div class="card">
    <div class="box rotate">
      <div class="fill"></div>
    </div>
    <p>rotate(45deg)</p>
  </div>

  <!-- rotateX(45deg) -->
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(45deg)</p>
  </div>
  <!-- rotateY(45deg) -->
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
  <!-- rotateZ(45deg) -->
  <div class="card">
    <div class="box rotateZ">
      <div class="fill"></div>
    </div>
    <p>rotateZ(45deg)</p>
  </div>
</body>

</html>

rotate(45deg)
rotateX(45deg)
rotateY(45deg)
transform: rotate3d(1, 0, 1, -180deg);顺时针旋转消失
在这里插入图片描述

三. 缩放scale效果图
scale(数值)定义倍数缩放，>1放大，<1缩小
scaleX()通过x轴定义，仅水平方向缩放
scaleY()通过y轴定义，仅垂直方向缩放
scaleZ()通过z轴定义，定义3d缩放

transform: scale(2);放大两倍在这里插入图片描述

transform: scaleX(2);水平方向放大两倍
在这里插入图片描述

transform: scaleY(2);垂直方向放大两倍在这里插入图片描述
缩小同理。

陈醋拌饭
关注
  • 19
    点赞
  • 踩
  • 72
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Transform scale 属性
weixin_44879787的博客
07-07 1万+
使用 CSS Transform scale 属性 CSS 属性transform里面的scale()函数，可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大了 2 倍： p { transform:scale(2); } transform属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如:hover时，transform属性可以方便的给元素添加交互。 下面是当用户悬停段落元素时，段落大小缩放到原始大小 1.1 倍的例子： <sty
纯css3 transform旋转属性创建立体纹理文字特效
11-23
这里的`function`可以是`rotate()`, `scale()`, `translate()`等，我们关注的是`rotate()`，它用于指定元素的旋转角度。例如： ```css element { transform: rotate(45deg); } ``` 这个例子将使元素沿其中心点按...
CSS3转换功能transform主要属性值分析及实现分享
01-19
今天我想介绍一下转换的用法： transform主要包括以下属性值： rotate(旋转度数) scale(缩放) skew(斜切扭曲) translate(对象平移) 利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体代码如下： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xh
css3的transform中scale缩放详解
09-25
主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下
大屏幕适配方法之：transform:scale()
最新发布
Mahuicool的博客
05-24 815
CSS3新增的属性transform主要用于设置元素的变形，比如旋转、倾斜、缩放等。我们今天要用到的正式它的缩放功能transform:scale()
CSS变形 transform 的所有属性详解
大剑师兰特的GIS世界
04-29 1159
CSS变形（Transform）属性允许您对元素进行复杂的2D或3D变换，包括旋转、缩放、移动（平移）、倾斜和矩阵变换。这些变换不会影响文档流，而是改变元素的外观。
Css属性transform详解（变形、旋转、缩放）
宝子的博客
05-17 1312
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
transform三大属性之scale（缩放）
weixin_44167504的博客
09-05 3万+
transform三大属性之scale scale(数值)定义倍数缩放，>1放大，<1缩小 scaleX()通过x轴定义，仅水平方向缩放 scaleY()通过y轴定义，仅垂直方向缩放 scaleZ()通过z轴定义，定义3d缩放 transform: scale(2);放大两倍 transform: scaleX(2);水平方向放大两倍 transform: scaleY(2);垂直方向放大两倍 缩小同理。 ...
transform属性
weixin_57777051的博客
06-28 9601
transform属性可以对元素进行移动、缩放、转动、拉长或拉伸。 Transform属性有四个常用方法：rotate(x,y)旋转，scale(x,y)缩放，translate(x,y)移动（平移）和skew(x-angle,y-angle)倾斜 1translate()从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。 示例： 2rotate()方法根据给定的角度顺时针或逆时针旋转元素 示例： 3scale()方法增加或减少元素的大小（缩放）（根据给定...
Transform的属性及使用
小谭鸡米花的博客
10-23 3万+
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、transform是什么？ Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 二、transform的属性值 假如有一个盒子，高度两百像素，宽度两百像素，设置一个背景颜色，下面来用这个盒子来观察transform每个属性值的效..
transform三大属性之rotate（旋转）
热门推荐
weixin_44167504的博客
09-05 4万+
transform三大属性之rotate
css3 transform属性详解
12-13
CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。  translate()函数接受CSS的标准度量单位；scale()函数接受一个0和1之间的十进制值；rotate()和skew()两个函数都接受一个径向的度量单位值...
css3 transform过渡抖动问题解决
01-18
transform: scale(1.2) rotate(0.1deg); transform:translate();偏移会使图片或文字变得模糊 transform偏移还会使图片或文字失帧，变得模糊，可以使用clac解决 如： transform:translate(-50%); 换成： transform:...
css3三角形布局transform旋转列表图片三角形布局代码
11-05
至于`transform`属性，除了`rotate()`用于旋转元素外，还有其他用途，如缩放（`scale()`）、平移（`translate()`）、倾斜（`skew()`）等，可以结合使用以实现更复杂的效果。 总之，通过CSS3的`transform`属性和边框...
详解transform:translate(-50%,-50%)
qq_41083105的博客
03-26 3万+
关于transform:translate(-50%,-50%) 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。 这句话的应用场景是实现块居中，具体实现如下： <style> .outer { width: 300px; height: 300px; posit...
transform:translate()方法坐标详解
从0到1的成长的博客
01-05 3万+
定义：translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 但是如何移动呢？于是做了以下实验： 实验1.设置transform:translate(0px,0px),即延X轴和延Y轴均移动0像素，保持原有位置，做对比实验，为了方便说明，添加了坐标轴，如下所示： 实验2：设置transform:translate(10px,10px),即延X轴和延Y轴均移动10像素，对比原图位置，移动后的图如下所示， 结论：当移动的数是正数时，在Y轴方向上，相对原来的位
CSS动画中的 transform 之 scale（缩放）
wcxrib的博客
01-31 2740
分别对元素在X轴或Y轴上执行缩放操作，如果x或y的值为0到1之间的数值，则元素会缩小；如果它们的值大于1，则会放大。
css中transform属性的scale
09-01
在CSS中，transform属性的scale用于将元素进行缩放。可以通过设置scale的值来控制元素的大小。例如，当scale的值为1时，元素的大小保持不变；当scale的值大于1时，元素会放大；当scale的值小于1时，元素会缩小。这个属性可以接受一个或两个参数，分别表示水平和垂直方向上的缩放比例。 在给定的代码示例中，transform属性的scale值可以通过以下注释部分的代码来进行设置： /*transform:scale(2);*/ // 将元素放大2倍 /*transform:scale(1.5);*/ // 将元素放大1.5倍 以上是设置元素的整体缩放比例，如果只想在一个方向上进行缩放，可以使用scaleX或scaleY属性，分别表示水平和垂直方向上的缩放。例如： /*transform:scaleX(2);*/ // 水平方向放大2倍 /*transform:scaleY(0.5);*/ // 垂直方向缩小一半 可以通过设置transform-origin属性来改变元素的缩放中心点，默认情况下，缩放中心点是元素的中心。 更多关于transform属性的实例和用法可以在http://www.w3cplus.com/content/css3-transform这个网址中找到。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [CSS3属性 transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）（附代码）](https://blog.csdn.net/qq_37968920/article/details/82391671)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值