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

1. 改变变形元素中心位置xeZ胜于蓝|优秀个人博客

    语法:xeZ胜于蓝|优秀个人博客

 xeZ胜于蓝|优秀个人博客

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

2. 变形综合

 xeZ胜于蓝|优秀个人博客

    将多种变形综合在一起时，顺序不一样，效果有可能不一样xeZ胜于蓝|优秀个人博客

    eg:xeZ胜于蓝|优秀个人博客

 xeZ胜于蓝|优秀个人博客

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

    顺序改变，效果不变

 xeZ胜于蓝|优秀个人博客

    eg:xeZ胜于蓝|优秀个人博客

 xeZ胜于蓝|优秀个人博客

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

    顺序改变，效果不一样

 xeZ胜于蓝|优秀个人博客

3. 设置元素是2d变形还是3d变形xeZ胜于蓝|优秀个人博客

    语法:xeZ胜于蓝|优秀个人博客

 xeZ胜于蓝|优秀个人博客

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

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

 xeZ胜于蓝|优秀个人博客

    语法:xeZ胜于蓝|优秀个人博客

 xeZ胜于蓝|优秀个人博客

perspective: 数值+单位;

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

 xeZ胜于蓝|优秀个人博客

 xeZ胜于蓝|优秀个人博客

父元素{
    perspective: 1500px;
}

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

 xeZ胜于蓝|优秀个人博客

 xeZ胜于蓝|优秀个人博客

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

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/75.html

扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态

本文地址：/web/html/75.html

很赞哦！ ()