css中2D与3D转换

最新推荐文章于 2024-06-13 10:27:10 发布

赵哎呦

最新推荐文章于 2024-06-13 10:27:10 发布

阅读量246

点赞数

文章标签： css 3d css3

本文链接：https://blog.csdn.net/weixin_50795415/article/details/123049140

版权

2D

// 顺时针旋转45°
transform: rotate(45deg);

旋转角度为正，则顺时针方向旋转，否则逆时针方向旋转；

可以使用transform-origin属性设置自己的自定义变换原点

/* 以左上角为中心点进行旋转 */
transform-origin: 0 0;

// 放大三倍
transform: scale(3);

当数值小于1时，表示缩小元素；大于1时，则表示放大元素；

// （x斜切角度， y斜切角度）
transform: skew(10deg, 20deg);

/* 向右移动100px，向下移动200px */
transform: translate(100px, 200px);

和相对定位非常像，位移变形也会“老家留坑”、“形影分离”

/* 绕横轴旋转 */
transform: rotateX(30deg);
/* 绕横纵旋转 */
transform: rotateY(30deg);

transform: rotateX(30deg) rotateY(30deg);

用来定义透视强度，可以理解为“人眼到舞台的距离”，单位：px

<!DOCTYPE html>
<html lang="en">
<

关注