transform（平移、旋转、缩放、3d转换）、渐变、动画笔记

最新推荐文章于 2024-05-10 13:35:46 发布
最新推荐文章于 2024-05-10 13:35:46 发布
阅读量1.7w 收藏 361
点赞数 51
分类专栏： 学习 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45025670/article/details/125588381
版权

文章目录

HTML5

语义化标签，本地存储，视频，音频…

1. HTML5新增标签

 <!-- 语义化标签 -->
   <header>头部</header>
   <nav>导航</nav>
   <article>
     文章  页面中有一块独立的内容区域  放标签
   </article>
   <footer>底部</footer>
   <aside>侧边栏</aside>
   <section>内容</section>

2. 表单属性–交互表单属性

<form action="">
      <p>邮箱:<input type="email" required placeholder="提示文字"></p>
      <p>地址：<input type="url" name="" id="" autofocus></p>
      <p>日期<input type="date" name="" id=""></p>
      <p>时间<input type="time" name="" id=""></p>
      <p>月<input type="month" name="" id=""></p>
      <p>周<input type="week" name="" id=""></p>
      <p>数字<input type="number" name="" id=""></p>
      <p>电话<input type="tel" name="" id=""></p>
      <p>搜索<input type="search" name="" id=""></p>
      <p>颜色<input type="color" name="" id=""></p>
    </form>
    
    
    required  必填
    placeholder  提示文字
    autofocus  自动获取焦点

CSS3

选择器 属性 过渡 动画 平移 3d空间 边框…

1. 选择器

1.1 属性选择器

E[attr]    标签名[属性]{}
E[attr="value"]   标签名[属性名=属性值]{}
E[attr^="value"]  标签名[type^='t']  选中有type属性的，属性值以t开头的标签
E[attr$="value"]  标签名[type$='t']  选中有type属性的，属性值以t结尾的标签

1.2 结构伪类选择器

first-child
last-child
nth-child(n)  even  odd  -n+3  3n

1.3 伪元素选择器

::before  
::after
-------------
1:伪元素  content属性必不可少
2：必须依附于真正的元素   （标签+内容）
3：after显示在内容最后边  before显示内容的最前边
4：伪元素具有行内元素的特点

2. css属性

2.1 平面转换transform

改变盒子在平面内的形态（位移，旋转，缩放）

2.1.1 平移

transform:translate(水平移动距离，垂直移动距离)

取值: (正负都可以)

1:像素单位数值

2:百分比(参照物盒子自身的尺寸)

x轴正向为右,y轴正向为下

translate如果只给出一个值,表示x轴方向移动距离
单独设置某个方向的移动距离   translateX  和 translateY

<!DOCTYPE html>
<html>
<head>
    <style>
     .father{
     
       width: 500px;
       height: 300px;
       margin: 100px auto;
       border: 1px solid #000;
     }
     .son{
     
       width: 200px;
       height: 100px;
       background-color: pink;
       /* 过渡 */
       transition: all 1s;
     }
     .father:hover .son{
     
       /* transform: translate(100px,50px); */

       /* 百分比：盒子自身尺寸的百分比 */
       /* transform: translate(100%,50%); */
       /* transform: translate(-100%,-50%); */

        /* 只给出一个值  x轴移动距离 */
       /* transform: translate(100px); */

       transform: translateY(100px);

     }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
最低0.47元/天 解锁文章
Youser511
关注
  • 51
    点赞
  • 踩
  • 361
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
【CSS笔记】CSS动画效果（2d、3d）之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画
05-03 1058
这篇文章，主要介绍CSS动画效果（2d、3d）之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。
Unity3D使用鼠标旋转缩放平移视角
08-25
Unity3D使用鼠标旋转缩放平移视角 Unity3D使用鼠标旋转缩放平移视角是 Unity3D游戏引擎中的一项重要功能，旨在提供一个灵活的视角控制系统，使玩家可以更加方便地浏览游戏的世界。本文将详细介绍如何使用鼠标旋转...
React踩坑系列——脚手架运行npm start时报错，web快速开发平台
2301_77033813的博客
04-04 642
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。/topics/618191877)，先到先得哦。**[外链图片转存中…(img-uqtiOBbF-1712201915436)][外链图片转存中…(img-UCD4v20A-1712201915437)]
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
最新发布
2401_84098033的博客
05-10 889
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Web前端之变形：平移、旋转与缩放
花&败
11-24 1507
变形就是指通过css来改变元素的形状或位置变形不会影响到页面的布局transform用来设置元素的变形效果。
Css3 ---- transform平移
Cg_Companion_Xi的博客
04-25 2343
transform的用法： transform：translate（x轴平移，y轴平移）; 也可以单独设置：transform：translateX（）; transform：translateY（）。如果只设置transform：translate（值），那么只会在X轴进行平移。值可以取负数。 也可以设置为 translateZ(); 但是需要 配合旋转，效果才比较明显。 代码： <!...
【前端学习】前端学习第八天：transform变形平移使用方法及立方体3D动画效果完整版
qq_49916504的博客
03-19 2092
通过使用transform对元素进行变形等相关操作，可以使元素的效果更加生动，下面就来介绍一下transform具体的一些属性。 1、平移 translate translateX（）：沿着x轴方向平移； translateY（）：沿着y轴方向平移； translateZ（）：沿着z轴方向平移。 其中，有两个特殊值： translateX（-50%）：水平居中； translateY（-50%）：垂直居中； 二、旋转 rotate rotateX（）：沿着x轴方向旋转； rotateY（
transform的缩放和移动
weixin_51937505的博客
03-17 2435
css3 transform的基础使用 translateX：水平方向的移动距离 translateY：垂直方向的移动距离 position: absolute; top: 200px; left:50%; transform: translateX(-50%); 缩放 scale 参数表示缩放倍数； 一个参数时：表示水平和垂直同时缩放该倍率 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍
CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例
NewHouser的博客
10-25 5843
transform: translate(水平移动距离，垂直移动距离);//距离的取值可以是数字或百分比向右向下为正数，向左向上为负数括号内只填一个值，默认为水平方向移动的距离
图片平移、旋转和缩放
11-17
根据控件的RenderTransform属性做的图片平移、旋转和缩放，基本都满足
Unity3D实现物体旋转缩放移动效果
08-26
Unity3D实现物体旋转缩放移动效果 Unity3D是一个功能强大且广泛使用的游戏引擎，它提供了大量的功能和工具来帮助开发者实现游戏和交互式应用程序。 Unity3D实现物体旋转缩放移动效果是Unity3D中一个重要的功能，它...
七参数法三维坐标旋转平移C++程序
04-28
本程序实现了基于七参数法的旋转平移矩阵，可以实现对三维坐标图像的旋转、平移，其中旋转包含了六种旋转顺序（xyz,xzy,yxz,yzx,zyx,zxy）可根据需要选择对应的参数，开发环境VS2013 程序实现参考了文章《朱宁宁. 三...
CSS3 transform实现图片旋转木马3D
10-20
css3 transform 3D 图片旋转木马
css3 transform 平移,CSS3 transform 属性使用方法及示例
weixin_39822423的博客
08-03 358
CSS3 transform 属性使用方法及示例transform CSS属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜，平移，旋转，缩放等在二维或三维空间等。下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。默认值：none适用于：可变形元素继承：没有可动画制作：版本：CSS3的新功能JavaScript语法：object.sty...
CSS中变形效果-transform（平移、旋转、缩放、倾斜）
热门推荐
shao_xuan_的博客
10-20 1万+
CSS中变形效果-transform（平移、旋转、缩放、倾斜）CSS3实现变形的优势2-D变形平移translate（）1、缩放scale()2、倾斜skew()3、旋转rotate()4、中心点transform-origin3-D变形1、旋转rotate3d()2、视距perspective3、transform-style（用于保存元素的3D 空间4、backface-visibility（定义元素在不面对屏幕时是否可见5、3D转换方法（位移，缩放）兼容性 CSS3实现变形的优势 1、无需加载额外的文
CSS动画中的 transform 之 translate（平移）
wcxrib的博客
01-30 1499
CSS平移主要指的是将一个图形或者元素在二维空间（通常是指页面或窗口）上进行平移。这种操作可以通过CSS的translate属性实现。在CSS中，translate是一个内置的函数，它可以用来将元素的位置进行平移。具体来说，translate有两个主要的参数x和y，分别代表要沿水平方向和垂直方向移动的距离。例如，会使得元素在页面上向右和平向下移动50像素。此外，translate还可以与其他变换属性结合使用，如transform属性，以实现更复杂的视觉效果。例如，表示只在水平方向移动，而。
transform旋转，平移，缩放，扭曲 斜切
weixin_33834628的博客
04-23 1240
transform 改变rotate 旋转translate 位移scale 缩放 skew 斜切变形记得兼容性：-webkit- -moz- -ms- -o-transform: rotate(Xdeg,Ydeg);deg 表示角度 X轴正半轴为0deg，顺时针旋转值越来越大。transform-origin( X ,Y ); 设置对象旋转的中心点，如果没设置该值，默认...
15 变形`transform`：平移、旋转、缩放
A mei不会敲代码的博客
12-07 713
目录变形`transform`：平移、旋转、缩放1. 平移示例:浮出效果z轴平移2. 旋转3. 缩放 变形transform：平移、旋转、缩放 变形通过css改变元素的形状或者位置 但不该页面布局 1. 平移 属性 translateX()沿着x轴方向平移 translateY() 沿着y轴方向平移 translateZ() 沿着z轴方向平移元素 z轴就是人眼与屏幕的方向 如果用百分比去平移，那百分比是相对于自身计算的 垂直水平居中的方式举例 使用绝对定位/* 这种居中方式，只适用于元素的大小确定
recttransform transform
09-22
RectTransform是Unity中用于布局和控制UI元素的组件。它是Transform的派生类，可以看作是Transform的升级版。RectTransform有一些额外的重要功能，如锚点(Anchors)和中心点(pivot)。 锚点决定了UI元素在其父物体中的位置和样式。锚点的取值范围为0(父物体左下角)到1(父物体右上角)。当锚点的最大和最小值不相同时，表示一个区间，锚点会分散在区间内的位置。锚点的特性是当父物体改变时，子物体的位置和大小也会相应改变。当锚点为点时，可以控制子物体固定在父物体的某个位置。当锚点为区域时，可以改变子物体的大小。 中心点(pivot)反映了UI元素的(0,0)点的坐标，取值范围为0(左下角)到1(右上角)。当UI元素的宽度或高度发生改变时，中心点处的内容不发生改变，而远离中心点的内容会发生改变。这个特性可以用来实现当UI不确定长度时，让UI的一边始终在起始位置，另一边随着内容扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值