Css变形 其他一些变形属性的语法以及使用

1. 改变变形元素中心位置 语法:transform-origin: left | right | center top | center | bottom;2. 变形综合 将多种变形综合在一起时，顺序不一样，效果有可能不一样 eg:transform: rotate(360deg) scale(1.5); transform: scale(1.5) rotate(360deg); 顺序改变，效果不变 eg:transform: transl 0 Comments


1. 改变变形元素中心位置

语法:

transform-origin: left | right | center  top | center | bottom;


2. 变形综合

将多种变形综合在一起时，顺序不一样，效果有可能不一样

eg:

transform: rotate(360deg) scale(1.5);
transform: scale(1.5) rotate(360deg);

顺序改变，效果不变

eg:

transform: translateX(100px) rotate(360deg);
transform: rotate(360deg) translateX(100px);

顺序改变，效果不一样


3. 设置元素是2d变形还是3d变形

语法:

transform-style: flat(2d变形) | preserve-3d(3d变形);



4. 设置透视，井深(即3d效果的强度)

语法:

perspective: 数值+单位;

eg: 给父元素添加同一的透视值

父元素{
    perspective: 1500px;
}


eg: 还可以单独给某一个子元素设置透视值

子元素{
    transform: perspective(500px) rotateY(30deg);
}


本文链接：https://my.lmcjl.com/post/20957.html

展开阅读全文

相关文章

4 评论

留下您的评论.