回复“资料”便可获赠Python、Java学习资料css
CSS3 3D变换功能容许在3D空间中变换元素。ide
1、元素的3D转换
使用CSS3 3D变换功能，能够对三维空间中的元素执行基本的变换操做。如移动，旋转，缩放和倾斜。函数
变换后的元素不会影响周围的元素，但能够像绝对定位的元素同样将它们重叠。可是，变换后的元素在其默认位置（未变换）仍会在布局中占用空间。布局
2、使用CSS变换和Transform()函数变换功能
CSS3 transform属性使用变换功能来操纵元素使用的坐标系，以便应用变换效果。学习
案例描述了3D变换功能。
1. translate3d()
rotation3d()函数将3D空间中的元素围绕[x，y，z]方向向量为圆点旋转指定角度。这能够写成rotate(vx，vy，vz，angle)。flex
例：
<html><head><meta charset="utf-8"><title>项目</title><style>.container {width: 125px;height: 125px;perspective: 500px;border: 4px solid #e5a043;background: #fff2dd;}
.transformed {-webkit-transform: translate3d(25px, 25px, 50px);/* Chrome, Safari, Opera */transform: translate3d(25px, 25px, 50px);}
img {width: 125px;height: 125px;}</style></head><body style="background-color: aqua;"><h2>Before Translation:</h2><div class="container"><img src="timg.jpg" alt="Diamond Card"></div><h2>After Translation:</h2><div class="container"><img src="timg.jpg" class="transformed" alt="Diamond Card"></div></body></html>
该功能translate3d(25px, 25px, 50px)将图像沿X和Y轴正方向移动25个像素，并沿Z轴正方向移动50个像素。
注：
3D变换使用三维坐标系，可是沿Z方向的移动并不老是很明显，由于这些元素存在于二维平面（平面）上而且没有深度。
经过使Z轴上较高的元素（即距观看者更近的元素看起来较大，而离观看者更远的元素看起来更小），能够使用perspective和perspective-origin的CSS属性为场景添加深度感。
注意：
若是对一个元素应用3D变换而不设置透视，结果将不会显示为三维效果。
2. rotate3d()
该rotate3d()函数围绕[x，y，z]方向向量将3D空间中的元素旋转指定角度。能够写成rotate(vx, vy, vz, angle)。
例：
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #a2b058; background: #f0f5d8;}.transformed { -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */ transform: rotate3d(0, 1, 0, 60deg); }img {width: 125px;height: 125px;}
该功能rotate3d(0, 1, 0, 60deg)将图像沿Y轴旋转60度。也能够使用负值沿相反方向旋转元素。
3. scale3d()
scale3d()函数更改元素的大小。能够写成scale(sx, sy, sz)。除非将其与旋转和透视图等其余变换功能结合使用，不然此功能的效果并不明显。
例：
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #6486ab; background: #e9eef3;}.transformed { -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */ transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); }img {width: 125px;height: 125px;}
运行结果：
函数scale3d(1, 1, 2)沿Z轴缩放元素，函数rotate3d(1, 0, 0, 60deg)沿X轴旋转图像60度。
4. matrix3d()
matrix3d()功能能够一次执行全部3D转换，例如平移，旋转和缩放。它采用4×4转换矩阵]形式的16个参数。
这是使用matrix3d()功能执行3D转换的示例。
示例
.container {width: 125px;height: 125px;perspective: 300px;border: 4px solid #d14e46;background: #fddddb;}
.transformed {-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);/* Chrome, Safari, Opera */transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);}
img {width: 125px;height: 125px;}
可是，一次执行多个转换时，使用单个转换函数并按顺序列出它们会更方便，以下所示：
示例
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #a2b058; background: #f0f5d8;}.transformed { -webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */ transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); }img {width: 125px;height: 125px;}
3、总结
本文基于CSS基础，教读者如何去进行2D->3D的转换，介绍了常见的的几个方法。去进行移动、缩放、转动、拉长或拉伸等一系列操做。使用Html语言，使用丰富的案例，以及效果图的展现。
欢迎你们积极尝试，有时候看到别人实现起来很简单，可是到本身动手实现的时候，总会有各类各样的问题，切勿眼高手低，勤动手，才能够理解的更加深入。
但愿可以帮助你学习。
------------------- End -------------------
往期精彩文章推荐：
本文分享自微信公众号 - IT共享之家（info-share）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。