文章目录
前言
一、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属性中添加即可
