从零开始前端学习[34]:Cs3中的2D变换,transform变换，

最新推荐文章于 2021-11-07 15:41:55 发布
最新推荐文章于 2021-11-07 15:41:55 发布
阅读量766 收藏
点赞数 1
分类专栏： # 1.从零开始挑战前端 文章标签： transform rotate scale translate skew
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_29924041/article/details/78236012
版权

Cs3中的transition变换-transform变换

  1. transform属性
  2. transform-origin基点属性

提示:
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

transform属性

之前已经使用过关于transform相关的属性了。如rotate，但是并没有具体研习过其属性具体的属性值是什么。在这里详细的说明一下相关的介绍一下

transform:rotate(deg)旋转属性

rotate本来就是旋转的意思，在这里也是，其转换特性是其旋转的度数

属性值 属性值的含义
rotate 旋转，默认是绕其中心点进行旋转操作
rotateX 绕着X轴旋转
rotateY 绕着Y轴开始旋转
rotateZ 绕着Z轴开始旋转，默认是绕着Z轴方向进行旋转的

注意:rotate中的填写的参数可以有三种形式:deg,turn,rad

deg很直白，就是角度的意思。turn为圈数的单位，rad是弧度的意思。并且如果你想让其往相反方向进行旋转的话，这个时候可能需要的在其前面添加一个负号

因为其有一个rotateZ，说明其可以在立体三维z轴方向上进行旋转，首先可以了解一下其旋转方向的相关东西

从上图中就可以看到x，y，z的正轴方向以及其反向

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
      div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s}
      div p:nth-child(1):hover{transform: rotate(180deg)}
      /*div p:nth-child(1):hover{transform: rotate(0.5turn)}*/
      div p:nth-child(2):hover{transform: rotateX(-180deg)}
      div p:nth-child(3):hover{transform: rotateY(180deg)}
      div p:nth-child(4):hover{transform: rotateZ(180deg)}
  </style>
</head>
<body>
    <div class="main">
      <p>rotate</p>
      <p>rotateX</p>
      <p>rotateY</p>
      <p>rotateZ</p>
    </div>
</body>
</html>

显示效果如下所示:

这里写图片描述

注意：默认的情况下是绕着Z轴开始旋转的

transform:scale缩放属性

scale是缩放的意思，其也是有多个属性值的，并且其内部可以有多个参数，如

 transform: scale(0.2,1.2);
 transform: scale(0.2);

当一个值的时候既代表X轴又代表Y轴，当两个值的时候，第一个代表的是X轴，第二个代表的是Y轴

属性值 属性值的含义
scale 缩放，一个值代表X,Y轴，两个值中第一个代表X，第二个代表Y
scaleX 沿着X轴开始缩放
scaleY 沿着Y轴开始缩放
scaleZ 沿着Z轴开始缩放

注意：
当里面的值大于1的时候，表示放大原来的多少倍
当里面的值小于1的时候，表示缩小为原来的多少倍

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
      div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s}
      div p:nth-child(1):hover{transform: scale(2)}
      div p:nth-child(2):hover{transform: scaleX(0.5)}
      div p:nth-child(3):hover{transform: scaleY(1.5)}
      div p:nth-child(4):hover{transform: scaleZ(0.2)} /**对于2d图形来说，在z轴方向上面其实并没有什么效果*/
  </style>
</head>
<body>
    <div class="main">
      <p>scale</p>
      <p>scaleX</p>
      <p>scaleY</p>
      <p>scaleZ</p>
    </div>
</body>
</html>

注意的是，这个z轴缩放，针对二维的图形来说，scaleZ其实并没有多少效果显示出来，但是对3D图形的话，这个就是可以的

这里写图片描述

transform:translate(X,Y)位移属性

transform:translate位移属性，唯一之后，原来的位置是不会被其他的元素占用的，兵器移动到其他位置的时候，不会去影响其他元素的站位，
当一个值的时候代表的是X轴方向上移动
两个值的时候，第一个值代表的是X轴，第二个值代表的是y轴的方向

transform：translate（100px）
transform：translate（100px,100px）;
属性值 属性值的含义
translate 位移，一个值代表X,Y轴，两个值中第一个代表X，第二个代表Y
translateX 沿着X轴开始位移
translateY 沿着Y轴开始位移
translateZ 沿着Z轴开始位移，

注意：位移后元素的初始位置依然占据，且移动后并不会影响其他元素的布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
      div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: deeppink;margin: 30px;transition: 2s}
      div p:nth-child(1):hover{transform: translate(100px,100px)}
      div p:nth-child(2):hover{transform: translateX(100px)}
      div p:nth-child(3):hover{transform: translateY(100px)}
      div p:nth-child(4):hover{transform: translateZ(50px)} /**需要3D环境支持的时候，才有效果*/
  </style>
</head>
<body>
    <div class="main">
      <p>translate</p>
      <p>translateX</p>
      <p>translateY</p>
      <p>translateZ</p>
    </div>
</body>
</html>

显示效果如下所示:

这里写图片描述

transform:skew(deg)旋转属性
transform: skew() 倾斜 单位：角度
只有一个值的时候，往x轴方向倾斜
两个值的时候，第一个值代表x轴，第二个值代表y轴
属性值 属性值的含义
skew 只有一个值的时候，往x轴方向倾斜,两个值的时候，第一个值代表x轴，第二个值代表y轴
skewX 沿着X轴开始倾斜
skewY 沿着Y轴开始倾斜 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
      div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s}
      div p:nth-child(1):hover{transform: skew(30deg)}
      div p:nth-child(2):hover{transform: skew(30deg,30deg)}
      div p:nth-child(3):hover{transform: skewX(30deg)}
      div p:nth-child(4):hover{transform: skewY(30deg)}
  </style>
</head>
<body>
    <div class="main">
      <p>skew</p>
      <p>skew</p>
      <p>skewX</p>
      <p>skewY</p>
    </div>
</body>
</html>

这里写图片描述

^_^ 小小码nong
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IntroToAlgorithms：CS3-使用Jupyter Notebooks的C ++算法简介
02-05
IntroToAlgorithms：CS3-使用Jupyter Notebooks的C ++算法简介
2D转换属性
AMD23的博客
07-30 279
2D转换 定义：2D变换，是在一个平面对元素进行的操作。 可以对元素进行水平或者垂直位移、旋转或者拉伸。 确定坐标系 默认状态下，x轴是水平的，向右为正。 默认状态下，y轴是垂直的，向下为正。 ---------------------------------------------------------------------------------------- 变形属性：transform 属性值： transform：none;默认值 transform：translate（）；移动 平移 单..
CSS3的变形transform、过渡transition、动画animation学习
weixin_34297300的博客
09-19 124
学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识 这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-），本文为简化内容，直接使用了原版属性 根据不同属性的支持度，在实际使用的时候需要添加相应的浏览器前缀支持 目录： 变形transform 过渡transition...
CSS3：2D转换
李建雨的博客
11-07 139
1、移动translate transform：translate（X值 Y值），X、Y值为当前盒子的局部坐标系值，也可使用百分比书写。 当使用translale进行盒子的移动时，原来的位置将会被保留，即不脱标。 2、旋转rotate transform: rotate(45deg); 能够将盒子进行一定角度的旋转，函数名为rotate，函数值为旋转角度数值加上单位（deg）。 对盒子设置rotate进行旋转的时候，页面会保留它原来的位置，并且不会影响到其他盒子。 3、设置旋转中心点
如何通过js获取到CSS3里面transform rotate旋转角度的度数，matrix解析
热门推荐
竹音林的专栏
11-24 2万+
如果你曾想通过下面这条语获取transform的值 $(objName).css('transform'); 很遗憾，获取到的是如下一个矩阵 matrix(a,b,c,d,e,f) 哈哈，看到这个矩阵，很多人都懵了，但是真想获取rotate的角度怎么办，以下是我总结的一些函数： /* * 解析matrix矩阵，0°-360°，返回旋转角度 * 当a=b||-a=b,0<=
CSS3 2d 转换
m0_51732708的博客
09-20 326
<h1>CSS3 2d 转换</h1> 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 CSS是什么？ CSS样式是表现 就像网页的外衣，比如：标题字体、颜色变化、为标题加入背景图片、边框等。 所有这些用来改变内容外观的东西称之为表现。 提示：以下是本篇文章正文内容，下面案例可供参考 一、CSS3 2d 转换 （1）translate() 方法：设置元素的移动。　 transform:transl.
cs3api4lab:CS3API Jupyterlab连接器
03-25
该扩展由一个名为cs3api4lab的Python程序包和一个用于前端扩展的名为cs3api4lab的NPM程序包cs3api4lab 。 Python包实现了Jupyter ContentsManager和Checkpoints接口，可用于替换默认管理器。 要求 JupyterLab> = ...
TurtleGame:CS3B 最终项目
07-08
海龟游戏自述~~ CS3B 最终项目
CS3C:CS3C的项目和实验室
03-26
CS3C CS3C的项目和实验室
QuickCharades:CS3B Adroid 应用程序项目
07-08
速写应用发布链接： 镜像链接： Javadoc 文档：点击下图进入应用Demo 项目建立在： 安卓工作室Gradle构建 Min SDK : API Level 8 : Android 2.2 (Froyo)Target SDL : API Level 21: Android L所需的包： ## Android ...
CSS3中的2D转换（位移、旋转、缩放）
ItDaChuang的博客
09-26 1592
以案例的形式展现CSS3中的2D转换，包含位移translate/旋转rotate/缩放scale的相关知识和特点。
CSS3 之2D变换（旋转，缩放，位移，矩阵函数）
努力，追梦的博客
05-02 1万+
CSS3 之2D变换   l transform •     rotate()  旋转函数 取值度数 –    deg  度数 –    Transform-origin旋转的基点 •     skew()倾斜函数 取值度数 –    skewX() –    skewY() •     scale()缩放函数 取值 正数、负数和小数 –    scaleX() –
HTML+CSS教程（九）CSS3(2D变换)
qq_43434300的博客
11-16 250
一.2D变换 1.旋转transform:rotate 例: &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style type=&qu
Css3 matrix
林中明月间丶
04-19 349
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;me
从零开始前端学习[36]:Cs3中的3D效果实现
章飞 _906285288的博客
10-14 817
Cs3中的3D效果实现 perspective井深 transform-style 3D环境 提示 博主:章飞_906285288 博客地址：http://blog.csdn.net/qq_29924041 perspective井深在3d效果实现的过程中，需要一个井深 需要一个3D的环境，其中perspective就是为了创建井深，而transform-style就是为了创建3d环境
CSS3 2D转换
Teresa0312的博客
03-05 856
（1）translate() 方法：设置元素的移动。　 transform:translate(50px,100px);(把元素从左侧移动 50 像素，从顶端移动 100 像素。)　 （2）rotate() 方法：设置元素的旋转角度。（正值顺时针，负值逆时针） 　transform:rotate(30deg); （顺时针旋转 30 度。） 　transform:rotate(-30deg);（逆时...
CSS3 2D转换 transform
欢迎访问我的主页：https://www.bookbook.cc
03-17 8273
文章目录一、2D转换 transform1.1 2D是什么?二、translate 移动2.1 语法2.2 特点 一、2D转换 transform 转换( transform) 是CS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。 转换( transform)你可以简单理解为变形 移动：translate 旋转：rotate 缩放：scale 1.1 2D是什么? 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系。 二、translate 移动 2D移动
css3 2D转换
weixin_41708614的博客
02-05 255
translate() 方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数，例如：   div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 {
css32D、3D、动画、过渡
weixin_48846877的博客
08-10 304
一、css3里面的2D <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ margin: 250px auto; width: 200px; height: 200px; border: 1px solid #000;
let arr = [{ businessCode: '1', businessName: "cs1" }, { businessCode: '2', businessName: "cs2" }]利用JavaScript数组的方法实现将数组中businessCode == ‘2’的元素替换为{ businessCode: '3', businessName: "cs3" }
最新发布
06-13
arr.splice(index, 1, { businessCode: '3', businessName: "cs3" }); } ``` 首先使用 `findIndex()` 方法找到 businessCode 等于 2 的元素的索引，如果找到了，则使用 `splice()` 方法替换该元素。注意，`splice...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值