一、了解2D转换

1.特点

2.优点

3.开启2D转换的语法及注意事项

二、2D转换的属性及其基本属性值

1.translate 平移

2.rotate() 旋转

3. transform-origin 设置变形原点

4.scale 缩放

5.skew() 倾斜

一、了解2D转换

1.特点

2D转换是通过css来改变元素的形状或位置，也可以叫做变形

2.优点

变形不会影响到页面的布局(只折腾自己)

3.开启2D转换的语法及注意事项

语法：transform: ; 用来设置元素的变形效果 ,

注意事项：尽量变形写在一个transform里，不然下面再写一个，就会覆盖上面

二、2D转换的属性及其基本属性值

变形的属性在前面也说到了transform，接下来说说transform的基本属性值

1.translate 平移

可选值：a translateX()沿着x轴方向平移

意思是说设置元素沿着水平方向平移

b translateY（)沿着Y轴方向平移

意思是说设置元素沿着垂直方向平移

c translateZ（)沿着Z轴方向平移

意思是说设置元素沿着自己的方向平移，这个看不出来，但是通过细微的观察可以发现元素变小或变大了，这也就是说明元素离你的位置变远或变近了，具体可以了解3D转换就能明白它的含义

设置内容区样式：.box {width: 500px;height: 500px;border: 1px solid red;position: relative;}.box1 {width: 100px;height: 100px;background-color: gray;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.box2 {width: 100px;height: 100px;background-color: pink;transition: all 0.5s;}.box > div {float: left;}.box2:hover {transform: translateY(-3px);box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);}.box2:active {transform: translate(100px, 100px);}span:hover {color: red;/*行内元素不可以位移 */transform: translate(100px, 100px);}内容区：<div class="box"><div class="box1">box1</div><div class="box2">box2</div>  <span>乌之也而人骨意，白。</span> </div>

如图所示：box1设置了在父元素盒子中水平垂直居中，由于图片大小的缘故，所以看不出来，不过确实是居中的，这也是继使用绝对定位设置水平垂直居中的第二种设置水平垂直的方法，box2设置了向上平移了3像素，再加上设置了盒子阴影，看起来就像是盒子浮起来了一样，再加上hover效果，看上去非常美观，感兴趣的朋友可以试试，span盒子设置了平移，但是没有起作用，这是因为行内元素不可以位移

2.rotate() 旋转

可选值：a rotateX() ，元素围绕其 X 轴以设定的度数进行旋转

b rotateY() ，元素围绕其 Y轴以设定的度数进行旋转

c rotateZ() ，元素围绕其 Z轴以设定的度数进行旋转

单位：数值deg

设置内容区样式：.outer {width: 600px;height: 600px;border: 10px solid red;}.box {width: 100px;height: 100px;line-height: 100px;background-color: #bfa;margin: 10px;text-align: center;font-size: 26px;transition: all 2s;}.box:hover {transform: rotateZ(45deg);}
内容区：<div class="outer"><div class="box">1</div></div>

如图所示：设置了box旋转后，当鼠标移入box后，box果然旋转了45%

3. transform-origin 设置变形原点

可选值：a 默认值transform-origin:（center center）

b 值也可以为方向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值

4.scale 缩放

缩放属性是让元素根据中心原点对对象进行缩放。

默认值是1，这里的参数没有单位，1以下的任何值，使一个元素缩小，0则是消失；而任何大于1的值，会让元素变得更大。

缩放属性的属性值和位移属性的属性值是类似的语法，可以是一个值，也可以有两个属性值：只有一个值的时候第二个值和第一个值是相等的；两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。

单独对x轴y轴进行设置：同样这里的X/Y/Z也是是需要大写的。

可选值：a transform:scaleX();

b transform:scaleY();


设置内容区样式：.box1 {width: 100px;height: 100px;background-color: #bfa;margin: 0 auto;/* 设置过渡 */transition:all 2s;}.box1:hover{transform: scaleX(2);}
内容区：<div class="box1"></div>

如图所示：设置了盒子沿着X轴放大，动画未开始时是一个正方形盒子，动画结束后放大成了长方形

5.skew() 倾斜

倾斜skew()是指通过设定的角度以其中心位置围绕着X轴和Y轴按照一定的角度倾斜显示。

一个参数时：表示x轴的倾斜x角度,y轴默认为0；

两个参数时：第一个参数表示x轴的倾斜角度，第二个参数表示y轴的倾斜角度。

变形的单位是deg

可选值：a x值：为正则向左变形，为负则向右变形

b y值：为正则向上变形，为负则向下变形



设置内容区样式：.box {width: 100px;height: 100px;margin: 5px;background-color: #bfa;transition: all 2s;}.box1:hover {transform: skew(45deg, 45deg);}.box2 {background: red;}.box2:hover {transform: skewX(45deg);}.box3 {background: green;}.box3:hover {transform: skewY(45deg);}
内容区：<div class="box box1"></div><div class="box box2"></div><div class="box box3"></div>

如图所示：设置了box1X轴倾斜45度Y轴倾斜45度后，box1就变成了图中的样子

动画搭配hover属性和过渡属性后带来的视觉效果很美观，有兴趣的伙伴可以试一试，会有收获的

动画三：2D转换（超详细！）相关推荐

codevs 2924 数独挑战 x(三种做法+超详细注释~)
2924 数独挑战时间限制: 1 s 空间限制: 1000 KB 题目等级 : 钻石 Diamond 题目描述 Description "芬兰数学家因卡拉,花费3个月时间设计出了世界 ...
苹果消息推送服务教程(三步曲)-超详细
mtrabelsi (原作者) 第一部分在iOS系统中,在后台运行的程序能够进行的操作是非常有限的.这种限制是为了节省手机电池. 但是,如果你需要在用户没有使用你的程序的情况下给他们推送消息该怎么 ...
TCP/IP 三次握手超详细总结
网络的基础知识一.协议 1.简介: 在计算机网络与信息通信领域里,人们经常提及"协议"一词.互联网中常用的具有代表性的协议有IP.TCP.HTTP等.而LAN(局域网)中常用的协 ...
Android属性动画源代码解析（超详细）
本文假定你已经对属性动画有了一定的了解,至少使用过属性动画.下面我们就从属性动画最简单的使用开始. ObjectAnimator.ofInt(target,propName,values[]).set ...
利用Python实现视频中人物的人脸转换超详细教程
前言:这个项目自己足足研究了有大半年,里面涉及的知识实在是太有趣太广了,所以实在是不能在研究完毕之后再记录下来,这份博客会不断更新,初心也只是给自己做过的事情做个记录,不过本人会力求完整详细.希望客官 ...
十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
大疆无人机空三建模干货分享(大疆智图集群建模超详细教程)
Part 01 大疆无人机空三建模干货分享(大疆智图集群建模超详细教程) 大疆智图集群简介大疆在今年5月推出的智图3.0.0及以上版本中加入了集群功能,有集群版许可的用户可以使用此功能.智图集群是由 ...
学习pandas全套代码【超详细】数据查看、输入输出、选取、集成、清洗、转换、重塑、数学和统计方法、排序
大家早上好,本人姓吴,如果觉得文章写得还行的话也可以叫我吴老师.欢迎大家跟我一起走进数据分析的世界,一起学习! 感兴趣的朋友可以关注我的数据分析专栏,里面有许多优质的文章跟大家分享哦. 本篇博客将会给 ...

动画三：2D转换（超详细！）

一、了解2D转换

1.特点

2.优点

3.开启2D转换的语法及注意事项

二、2D转换的属性及其基本属性值

1.translate 平移

2.rotate() 旋转

3. transform-origin 设置变形原点

4.scale 缩放

5.skew() 倾斜

动画三：2D转换（超详细！）相关推荐

最新文章

热门文章