CSS 3 3D 转换
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 3 3D 转换相关的知识,希望对你有一定的参考价值。
3D转换时,要赋予改变元素的父元素 perspective 属性
perspective: m px; // 视点和画面的距离,视点的位置默认在父元素的中心
perspective-origin:right top;//改变视点的位置
transform-orgin: //
backface-visibility: hidden / visible(默认)
========================================================================================
使用 transform 属性将 html 元素在三维空间内
1.旋转 rotate
rotateX(角度)
rotateY(角度)
rotateZ(角度)
rotate3d(x,y,z,角度) //
2.移动 translate
translateX(长度)
translateY(长度)
translateZ(长度)
translate3d(x,y,z,角度)
3.缩放 scale
scaleX(x)
scaleY(y)
scaleZ(z)
scale3d(x,y,z)
==================================================================================
transform-style: flat //默认,子元素将不保留其3D位置
preserve-3d; //子元素将保留其3D位置
以上是关于CSS 3 3D 转换的主要内容,如果未能解决你的问题,请参考以下文章