文章目录

前言

一、perspective属性和transform-style属性

二、transform之3d转换

transform之translate3d(x,y,z)平移

tranform之rotate3d(x, y, z, a)旋转；

tranform之scale3d(x, y, z)缩放

三、动画

1.简单说明

2.@keyframes属性

3. animation 属性

总结

前言

transform的3d转换和CSS3动画基本使用方法

transform可以3d转换的属性有平移、旋转、缩放

空间坐标：是从坐标角度定义的，xyz三条坐标构成一个立体的空间。

x轴向左为负，向右为正；y轴向上为负，向下为正；z轴向屏幕内为负，向屏幕外为正

x轴是横向的，y轴是纵向的，而z轴则是直面我们的一条轴

一、perspective属性和transform-style属性

perspective属性是透视属性，设置其属性值；相当于视距，眼睛到屏幕的视距。通过透视属性才能够看清元素在Z轴的变化。（透视属性可以放在在其父元素上，才能看到其子元素的xyz轴的具体变化）
transform-style属性，转变样式，设置preserve-3d可以开启3d空间，其子元素就会受到3d空间的影响

二、transform之3d转换

transform之translate3d(x,y,z)平移
- 在2d平移的x，y轴上添加了z轴，进行平移；可以拆分写tranlateX()、tranlateY()、tranlateZ()
tranform之rotate3d(x, y, z, a)旋转；
- x、y、z分别代表旋转轴xyz的矢量方向(number数值 0-1)，a则是旋转的角度。拆分写为rotateX(deg)、rotateY(deg)、rotateZ(deg)。需要开启透视才能查看旋转轴变化
  - x轴旋转效果：

        body{height: 100vh;display: flex;justify-content: center;align-items: center;/* 开启透视 */perspective: 100px; }.box{width: 200px;height: 200px;transition: .7s;background-color: pink;   }.box:hover{/* x轴旋转 */transform: rotateX(40deg);}

Y轴旋转效果

        body{height: 100vh;display: flex;justify-content: center;align-items: center;/* 开启透视 */perspective: 100px; }.box{width: 200px;height: 200px;transition: .7s;background-color: pink;   }.box:hover{/* y轴旋转 */transform: rotateY(40deg);}

z轴旋转效果

        body{height: 100vh;display: flex;justify-content: center;align-items: center;/* 开启透视 */perspective: 100px; }.box{width: 200px;height: 200px;transition: .7s;background-color: pink;   }.box:hover{/* z轴旋转 */transform: rotateZ(40deg);}

tranform之scale3d(x, y, z)缩放

x轴和y轴的缩放就是宽和高的效果，z轴比较特殊，需要配合旋转才能看见效果css代码
CSS代码

<style>*{margin: 0;padding: 0;}body{height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;perspective: 1000px;}.box1, .box2, .box3{width: 200px;height: 200px;background-color: lightcoral;margin: 30px 0;transition: .5s;}.box1:hover{transform: scaleX(1.5);}.box2:hover{transform: scaleY(1.5);}.box3:hover{transform: scaleZ(4) rotateX(80deg);}
</style>

HTML代码

<body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>

x轴缩放效果图
y轴缩放效果图
z轴缩放效果图

三、动画

1.简单说明

使用动画前需要先定义动画(@keyframes 动画名称)，然后再使用动画(animation)

2.@keyframes属性

使用@keyframes 动画名称，定义一个动画名称，然后再属性中添加动画样式from{}开始，to{}结束

也可以使用百分比来定义动画内容0%{}开始，100%{}结束

@keyframes move {0%{margin-left: 0px;}50%{margin-left: 50px;}100%{margin-left: 100px;}}

3. animation 属性

定义好动画后，就该给指定的元素使用动画了。
animation：动画名称持续时间播放次数可是播放播放结束状态......,一般除了动画名称和动持续时间外，其他都可以省略。其余可以查阅css mdn文档

        .box{width: 100px;height: 100px;background-color: pink;animation: move 1s infinite;}

效果图

总结

这些就是一些transform的3d转换和动画的基本使用方法，transform-style：preserve-3d在需要实现3d效果的父元素的css属性中添加即可

CSS3的transform之3d转换、CSS3动画相关推荐

CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
09.CSS3渐变、过渡、转换、动画
CSS3渐变 (1).什么是渐变 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradi ...
CSS3渐变、过渡、转换、动画
1.CSS3渐变 (1).什么是渐变 CSS3渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用CSS3渐变(gradie ...
六、CSS 速览 —— 平面转换、3D转换、动画
平面转换.3D转换.动画字体图标 iconfont 阿里图标库从图标库引用素材平面转换 transition: all 1s; 设置元素变换动画 transform: translate(px, ...
CSS transform 2D/3D 转换对元素进行移动、缩放、转动、拉长或拉伸。
transform 2D/3D转换, 对元素进行移动.缩放.转动.拉长或拉伸. 2D: translate() 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标 ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
CSS3 基本属性浅析（含选择器、背景阴影、3D转换、动画等）
1渐进增强原则 2私有前缀不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试: Chrome浏览器:-webkit-border-radius: 5px; ...
CSS3新特性(属性选择器、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀）
这里写目录标题一.CSS3 属性选择器二.CSS3 结构伪类选择器三. CSS3 伪元素选择器四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...

CSS3的transform之3d转换、CSS3动画

前言

一、perspective属性和transform-style属性

二、transform之3d转换

transform之translate3d(x,y,z)平移

tranform之rotate3d(x, y, z, a)旋转；

tranform之scale3d(x, y, z)缩放

三、动画

1.简单说明

2.@keyframes属性

3. animation 属性

总结

CSS3的transform之3d转换、CSS3动画相关推荐

最新文章

热门文章