特点:
transform 不会影响布局.
感觉应该是为动画而生的.
会先计算 margin,然后计算verticalaline,
根据这些完成dom的基本位置之后,才会计算 transform
也就是说, transform 不会影响 margin,verticalaline

image.png

问题1.
以下两种设置的效果是不同的.

item1{
    transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
}

item2{
    transform: rotate3d(1,1,1,45deg);
}

image.png

原因在于, 元素的参照系,参照坐标轴是以自身为确定的.
也就是,会随着元素的旋转跟着变化.

(在这里我们留个数学题, 留待日后好好学一线向量.
如何通过 第一种三个量的设置, 模拟出跟第二种一样的效果?)

第二个问题,
如果父级因transform 而变化, 子级会跟着变嘛?
会,
父级block, 子级inline,inline-block,block,时会
父级relative, 子级absolute 时,也会
float时也会.
其实这符合逻辑.
如果父级都设置了transform 会如何?
似乎可以认为,
先根据父级进行行为,在此基础上,再以子级的进行行为.

image.png

问题:
scalez 是个什么鬼?
scaleZ()
html
根据这个页面,可以认为: scaleZ会对translateZ 的数据进行放大或缩小?

image.png
css
image.png
效果图
image.png
更换数据
css
image.png
image.png image.png

这个transform-origin 非常重要, 这个直接就决定了,
上面所有变换的轴,以及最后的效果
有两个参数, x,y,
x决定 x轴的位置,从border开始的左处为0
y决定 y轴的位置,从border开始的顶处为0
默认值为50%50% 该百分比就是 以包含border的width为基准的.
z轴以 x,y自然决定.

刚开始我感觉很别扭,
因为无法决定x轴和 y轴在z轴上的位置.
然后我明白了,所有的一切都源自一个原因.
那就是,元素在 z轴方向上是没有厚度的.
所以x,y轴在z轴方向元素身上,只有一个位置.

说到这里我们需要总结一下

transfrom很强大,因为引入了3d的概念.
但元素在z轴上是没有厚度的.
x 轴 有厚度, 有空间位置.
y 轴 有厚度, 有空间位置.
z 轴 没有厚度,有空间位置.
translate 影响的是 空间位置.
scale 影响的 应该是 厚度.
刚才让我差异的 scalez 是影响的 貌似是空间位置!
rotate 影响的是 空间位置.
skew 影响的 应该是 空间位置? 应该是 厚度?
因为如果 影响的是 空间位置, 没理由 没有 scalez啊?

关于transform-origin , 还有一个注意点是, 只会受到元素自身的影响.
父级的transform-origin 是不会影响子级的origin.
这一点跟 perspective-origin似乎是不同的?

自己研究了半天,只得出这些

perspective-origin是个什么属性?
发现 perspecive-origin只由 父级的决定
但 perspective 属性,
会受到 父级影响,也会受到子级影响,
两者不是 覆盖效果,而是叠加效果.
同样的数值,在父级和子级的设置效果不同.
两者的叠加不是加法.
同样的数据,子级的视距似乎比父级的视距要小,
也就是3d效果会更明显

还是搜索来的方便
大神果然是大神
好吧，CSS3 3D transform变换，不过如此
CSS3 3D transform视角属性perspective（Y旋转角度一致）实例页面

image.png

大概是明白了.
perspective-origin 只能设置在 父级上,并且只能影响子级,不能影响自身
perspecive: 500px 只能设置在 父级上,并且只能影响子级,不能影响自身
perspective-origin 只会影响 perspecitve:500px 而不会影响 transform:perspecitive(500px)

transform:perspective(500px) 只会影响自身,
默认的perspecive-origin 是自身的center
且该 perspecive-origin 是没有属性可以调整的.

最恶心的是,
perspecive:500px , 和 transform:perspective(500px) 是互相叠加的!
而叠加法则还不清楚.
perspecive:500px,transform:perspective(0 不设置) 和
perspecive:500px,transform:perspective(100000px) 效果很相似.
而
perspecive:0 不设置,transform:perspective(500px) 和
perspecive:100000px,transform:perspective(500px) 效果很相似.
也就是两者是互为基础,
但perspecive:500px,transform:perspective(500px) 的叠加
和perspecive:1000px 的效果不同
和transform:perspective(1000px) 的效果也不同

更恶心的是, 如果父级perspective-origin 不是默认值, 则两者叠加完全,嗯,难以理解?
难以预测?

偶然发现,这个效果是相似的.

.wrap1{
    perspective: 500px;
    .item1{
        transform: perspective(500px) rotateY(45deg);
    }
}
.wrap2{
    .item2{
        transform:perspective(250px) rotateY(45deg);
    }
}

image.png

根据测试得到以下几个数据 叠加的效果和后面的效果基本一致.
pers: 500 tranper : 500 和 transper 250
pers: 500 tranper : 400 和 transper 221
pers: 500 tranper : 300 和 transper 188
pers: 500 tranper : 200 和 transper 143

pers: 800 tranper : 800 和 transper 400
pers: 800 tranper : 400 和 transper 265
从上面的数据能得出公式嘛? 哎呀,感觉好浪费时间,
这玩意纯属靠猜, 我大概蒙出来了, 有点像小时候的发现数学规律
假设
pers:x tranper: y transpre: z
z = y / (x + y) * x
前提条件 x < y 如果 x > y 只需要把x,y的位置换一下就可以.
或者这么写更好理解
z/max = min/(min + max);
我在想,花了3,4个小时得出这么个东西,到底值不值?
不值, 不是说该知识点没有用,(确实可能用不上)
而是说,自己这么实验加猜测,实在是太浪费时间了.
应该找教材.妈了个比的.
但上面的公式很有局限,
仅限于 perspective-origin : center的情况.
至于perspective-origin : 其他数值; 的情况,
我就不能靠测试几个模拟的方式猜了,根本无法模拟.

===========
我不想提问题,每次想回答提出来的问题,都要浪费好长时间.
可还是要问一下,大不了就不回答完事.

perspective-origin 是否和 transform-origin 一样, 随着元素转换空间位置,
一起变化?
应该会吧.
假设不会, 那么translate 会原理 perspective-origin, 会出现变形才对.
当然这是针对父级元素而言的.
如果是子级元素,如果translate 且不是靠 trans:pers 来生成景深, 则会发生明显的视觉上的变形.

哎呀,说得好不清楚,就这样吧.
这一段,另起一个文章吧.

==========
再补一下transform-style: present 3d
我之前一直误会, 景深如果没有这个属性会失效.
不会失效.
这个属性的作用是,
按照空间的层次来展示.
如果不加

image.png

如果加

image.png

第一种是,按照dom元素,自己的层叠更高所以优先展示
第二种是,按照空间的层次,空间上的前面会覆盖后面.

继续看视频.

image.png

多个属性可以,分开设置

    transition: transform 1s,opacity 30s;  

支持的属性: 基本能用数值表示的

image.png image.png
image.png image.png
image.png
image.png

呵呵,原来视频里也有讲,哎..

image.png
image.png
image.png