动画 transform_ 3D【慢慢学习中】

二维的没有太多可说的，请参看：

https://blog.csdn.net/lee_magnum/article/details/11900171

为实现： 滚动的正方形，和 散播着圆环的圆  

例子来自：https://www.smashingmagazine.com/2016/07/front-end-challenge-accepted-css-3d-cube/

二 网上搜的一篇文章

首先我看的这篇文章：【拿着一个模型试着，我明白他一开始侧面的写法，但未和他一样的实现效果，看后面的数学计算，头有些大】

https://www.w3cplus.com/css3/front-end-challenge-accepted-css-3d-cube.html

对于x轴，高度值乘以4应该合适。对于y轴，应该是宽度值乘以4著作权归作者所有
通过具有preserve-3d值的transform-style 属性使它转变成一个3D对象著作权归作者所有
【最后改成了transform-origin。它决定了一个元素变换的中心点。

三维旋转过程中选择多选框backface-visibility:hidden
为了好看明白些：transform:translateZ(-100px);

现实就是IE不支持值是preserve-3d的transform-style属性著作权归作者所有。将preserve-3d换成了flat

读完后摘要：通过透视perspective：800[800-1000]，也可以去掉，分别写在某一个元素里面
          创建一个3d元素，内嵌某一个面
          [立体]每个侧面设置了新属性：transform-origin，其值是立方体中心的位置，以及backface-visibility: hidden
       
 [摘自上篇文章]

觉得还是想从原型上入手：拿着手中的充电头，他翻转同时的只能是一个方向，沿X轴顺时针旋转[向上].....

 transform-origin: 50% 50% -100px; //100为正方形的一半