css中2D/3D的变化
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
变换可以改变元素的位置、大小、旋转、倾斜等属性以创建各种动态效果。
一、常用的2D变换
-
平移translate使用 translate() 函数来改变元素的位置。可以指定水平和垂直方向的偏移量如
transform: translate(100px, 50px); -
缩放scale使用 scale() 函数来改变元素的大小。可以指定水平和垂直方向的缩放比例如
transform: scale(1.5, 0.8); -
旋转rotate使用 rotate() 函数来旋转元素。可以指定旋转角度正值表示顺时针旋转负值表示逆时针旋转如
transform: rotate(45deg); -
倾斜skew使用 skew() 函数来倾斜元素。可以指定水平和垂直方向的倾斜角度如
transform: skew(10deg, -5deg);
二、3D变换
CSS提供了更多的变换函数可以在3D空间中进行操作
-
平移translate与2D变换类似使用
translate3d()函数指定沿着X、Y、Z轴的偏移量。 -
缩放scale与2D变换类似使用
scale3d()函数指定沿着X、Y、Z轴的缩放比例。 -
旋转rotate与2D变换类似使用
rotate3d()函数指定围绕X、Y、Z轴旋转的角度。 -
透视perspective使用
perspective()函数设置元素的透视效果。可以通过调整透视距离来改变元素近大远小的效果。
通过组合和动画可以在元素上同时应用多个变换从而创建出更复杂的效果。例如可以使用过渡transition和关键帧动画keyframes animation来创建平滑的过渡和动画效果。
三、案例
使用过渡transition创建平滑的过渡效果
/* 过渡效果 */
.transition {
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease;
}
/* 鼠标悬停时触发过渡 */
.transition:hover {
background-color: black;
}使用关键帧动画keyframes animation创建平滑的动画效果
/* 关键帧动画 */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 应用动画 */
.animation {
animation-name: rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* 具有动画效果的元素 */
<div class="animation">这是一个旋转动画</div>
.transition 类将在鼠标悬停时触发背景颜色的过渡效果。.animation 类则可以使带有该类的元素执行旋转动画持续时间为 2 秒无限循环。