2d 3d 转换的补充

来源：互联网发布：程序编程范式是什么编辑：程序博客网时间：2024/04/29 11:36

1.沿着点旋转旋转(2d和3D基本相同)
是沿着自己的中心旋转的()
可以通过transform-origin:来更改旋转中心
transform: rotate(60deg);

2.沿着轴做旋转,
transform: skew(0deg,20deg);
//skew(X轴旋转,Y轴旋转)
这个之前没怎么使用
元素自己为中心.创建3维坐标轴(与浏览器坐标轴相同)
之后沿着轴旋转(不是很难用)
做出来就是平行四边形的样子
3.Matrix(矩阵)
这看起来就很麻烦
CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d()
matrix(缩放X,翻转Y,翻转X,缩放Y,移动X,移动Y)

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F

%A9%E9%98%B5/
好吧,我放弃了,之后再看吧

4.transform-style(这个之前也没怎么使用过)
transform-style
w3c的定义
属性规定如何在 3D 空间中呈现被嵌套的元素。

flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
注意:
两个元素一定是嵌套关系
并且需要在父元素里面设置
案例

<head>
<meta charset="UTF-8">
<title>transform-style测试</title>
<style>
/*设置层叠*/
body>div{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
transform: rotateY(-60deg);
transform-style: preserve-3d;/*写在父元素上*/
}
div>div{
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;
transform: rotateX(30deg);
/*写在子元素中是没有用的*/
/* transform-style: preserve-3d;*/
}
</style>
</head>
<body>

<div>这是第一个DIV
<div>这是第二个DIV</div>
</div>

阅读全文

0 0