day17 html5

day17ナレッジ

1. 2D:平面コントロールの要素の変形
変形属性:変換:変換
の属性値は関数関数です
2D関数関数:
2D変位、2D回転、2Dズーム、2Dチルト

2D位移:
transform:translate(x,y);属性值(px , %)
transform:translateX(x轴移动的距离)
transform:translateY(y轴移动的距离)

2D的缩放:
transform:scale(x,y)  x , y  这两个参数为一个数字,大于1放大  小于1缩小
transform:scaleX()
transform:scaleY()

2D的旋转:
transform:rotate(30deg)
transform:rotateX(30deg)
transform:rotateY(30deg)

2D的倾斜:
transform:skew(度数)
transform:skewX(度数)
transform:skewY(度数)

2D改变变形原点:
transform-origin:x,y;
属性值:left top right bottom  center    px     %  

缩放旋转对位移的影响:多个功能函数共同使用的情况下,尽量先写位移 后写 其他的功能函数。

css3目标伪类选择器:
元素选择符:target{当该元素被相关URL指向的时候,做样式的变换}

3D空间:
平面空间:transform-style:flat

形成3D空间(让父元素形成3D空间、3D舞台):transform-style:preserve-3D

3D的功能函数:
3d-位移  3d-缩放  3d-旋转

3d位移:
transform:translate3d(x,y,z);
transform:translateZ();

transform:translate(x,y);
transform:translateX()
transform:translateY()
21件のオリジナル記事を公開 いいね!0 訪問数282

おすすめ

転載: blog.csdn.net/jiatinghui/article/details/105374536