CSS 3D转换 |
您所在的位置：网站首页 › css反转卡片没有效果 › CSS 3D转换 |
CSS 3D转换
|
目录 CSS 3D转换 浏览器支持 转换属性 3D Transform方法 常用方法 rotatex() 方法 rotatey() 方法 结语 CSS 3D转换CSS3 允许我们使用 3D 转换来对元素进行格式化。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性ChromeIEFirefoxSafariOperatransform36.0 12.0 -webkit-10.016.0 10.0 -moz-4.0 -webkit-23.0 15.0 -webkit-transform-origin (three-value syntax)36.0 12.0 -webkit-10.016.0 10.0 -moz-4.0 -webkit-23.0 15.0 -webkit-transform-style36.0 12.0 -webkit-11.016.0 10.0 -moz-4.0 -webkit-23.0 15.0 -webkit-perspective36.0 12.0 -webkit-10.016.0 10.0 -moz-4.0 -webkit-23.0 15.0 -webkit-perspective-origin36.0 12.0 -webkit-10.016.0 10.0 -moz-4.0 -webkit-23.0 15.0 -webkit-backface-visibility36.0 12.0 -webkit-10.016.0 10.0 -moz-4.0 -webkit-23.0 15.0 -webkit-
转换属性 属性描述CSStransform向元素应用 2D 或 3D 转换。3transform-origin允许你改变被转换元素的位置。3transform-style规定被嵌套元素如何在 3D 空间中显示。3perspective规定 3D 元素的透视效果。3perspective-origin规定 3D 元素的底部位置。3backface-visibility定义元素在不面对屏幕时是否可见。3 3D Transform方法 函数描述matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。translate3d(x,y,z)定义 3D 转化。translateX(x)定义 3D 转化，仅使用用于 X 轴的值。translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。scale3d(x,y,z)定义 3D 缩放转换。scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。rotate3d(x,y,z,angle)定义 3D 旋转。rotateX(angle)定义沿 X 轴的 3D 旋转。rotateY(angle)定义沿 Y 轴的 3D 旋转。rotateZ(angle)定义沿 Z 轴的 3D 旋转。perspective(n)定义 3D 转换元素的透视视图。 常用方法 rotatex() 方法 通过 rotatex() 方法，元素围绕其 X 轴以给定的度数进行旋转。 div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */ -moz-transform:rotateX(120deg); /* Firefox */ } 你好。这是一个 div 元素。 你好。这是一个 div 元素。注释： Internet Explorer 和 Opera 不支持 rotateX 方法。
rotatey() 方法 通过 rotatey() 方法，元素围绕其 Y 轴以给定的度数进行旋转。 div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { transform:rotateY(130deg); -webkit-transform:rotateY(130deg); /* Safari and Chrome */ -moz-transform:rotateY(130deg); /* Firefox */ } 你好。这是一个 div 元素。 你好。这是一个 div 元素。注释： Internet Explorer 和 Opera 不支持 rotateX 方法。
时至今日，我自己都不知道这写的啥玩意。特意再搜了下，觉得 https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 这篇写比较有诚意，大家可以看下。
|
【本文地址】