css3笔记5 transform,transition

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

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

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

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

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

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

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

这个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旋转角度一致）实例页面

大概是明白了. 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);
    }
}

根据测试得到以下几个数据叠加的效果和后面的效果基本一致. 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 我之前一直误会, 景深如果没有这个属性会失效. 不会失效. 这个属性的作用是, 按照空间的层次来展示. 如果不加如果加

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

继续看视频. 多个属性可以,分开设置

    transition: transform 1s,opacity 30s;  

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

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

"Hello World, Hello Blog"

CATALOG

FEATURED TAGS

FRIENDS