漳州手机网站建设公司网站开发项目可行性

当前位置： 首页 > news >正文

漳州手机网站建设公司,网站开发项目可行性,网站管理和维护的主要工作有哪些,企业如何全面开展品牌工程建设Transform#xff1a;对元素进行变形#xff1b; Transition#xff1a;对元素某个属性或多个属性的变化#xff0c;进行控制#xff08;时间等#xff09;#xff0c;类似flash的补间动画。但只有两个关键贞。开始#xff0c;结束。 Animation#xff1a;对元素某个属… Transform对元素进行变形 Transition对元素某个属性或多个属性的变化进行控制时间等类似flash的补间动画。但只有两个关键贞。开始结束。 Animation对元素某个属性或多个属性的变化进行控制时间等类似flash的补间动画。可以设置多个关键贞。   Transition与Animation: transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值从而达到一种动画的效果。 transform 2D/3D 转换属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 一.CSS3 2D 转换 通过 CSS3 转换我们能够对元素进行移动、缩放、转动、拉长或拉伸。 1.2D Transform转换属性 属性 描述 CSS transform 向元素应用 2D 或 3D 转换。 3 transform-origin 允许你改变被转换元素的位置。 3
2.2D Transform 方法 函数 描述 实例 试一试 转换 translateX(n) translateY(n) 沿着 X 或Y 轴移动元素。 translate(x,y) 沿着 X 和 Y 轴移动元素。 值 translate(50px,100px) 把元素从左侧移动 50 像素从顶端移动 100 像素。 div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px);        /* IE 9 / -webkit-transform: translate(50px,100px); / Safari and Chrome / -o-transform: translate(50px,100px);        / Opera / -moz-transform: translate(50px,100px);     / Firefox / } ​​试一试​​ 缩放 scaleX(n) scaleY(n) 改变元素的宽或高度。 scale(x,y) 改变元素的宽度和高度。 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍把高度转换为原始高度的 4 倍。 div{ transform: scale(2,4); -ms-transform: scale(2,4);    / IE 9 / -webkit-transform: scale(2,4);    / Safari 和 Chrome / -o-transform: scale(2,4);    / Opera / -moz-transform: scale(2,4);    / Firefox / } ​​试一试​​ 定义 2D 旋转 rotate(angle) 在参数中规定角度。turn是圈1turn 360deg另外还有弧度rad2πrad 1turn 360deg。如transform:rotate(2turn); //旋转两圈 值 rotate(30deg) 把元素顺时针旋转 30 度。 div{ transform: rotate(30deg); -ms-transform: rotate(30deg);        / IE 9 / -webkit-transform: rotate(30deg);    / Safari and Chrome / -o-transform: rotate(30deg);        / Opera / -moz-transform: rotate(30deg);        / Firefox / } ​​试一试​​ 倾斜 skewX(angle) skewY(angle) 沿着 X 、或Y轴。 skew(x-angle,y-angle) 沿着 X 和 Y 轴。 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度围绕 Y 轴翻转 20 度。 div{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg);    / IE 9 / -webkit-transform: skew(30deg,20deg);    / Safari and Chrome / -o-transform: skew(30deg,20deg);    / Opera / -moz-transform: skew(30deg,20deg);    / Firefox / } ​​试一试​​ 使用六个值的矩阵。 matrix(n,n,n,n,n,n) 定义 2D 转换使用六个值的矩阵。 matrix() 方法把所有 2D 转换方法组合在一起。 matrix() 方法需要六个参数包含数学函数允许您旋转、缩放、移动以及倾斜元素。 使用 matrix 方法将 div 元素旋转 30 度 div{ transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        / IE 9 / -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    / Firefox / -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    / Safari and Chrome / -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        / Opera */ } ​​试一试​​ 二.CSS3 3D 转换 三维变换使用基于二维变换的相同属性如果您熟悉二维变换你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数 3D位移CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数 3D旋转CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数 3D缩放CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数 3D矩阵CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。 1.3D位移 在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是使用三维向量的坐标定义元素在每个方向移动多少。 随着px的增加直观效果上 X从左向右移动 Y从上向下移动 Z以方框中心为原点变大 ​​ ​​​​ ​​​​ ​​ 从上图的效果可以看出当z轴值越大时元素也离观看者更近从视觉上元素就变得更大反之其值越小时元素也离观看者更远从视觉上元素就变得更小。 例子 .stage {width: 300px;height: 300px;float: left;margin: 15px;position: relative;background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;-webkit-perspective: 1200px;-moz-perspective: 1200px;-ms-perspective: 1200px;-o-perspective: 1200px;perspective: 1200px; } .container {position: absolute;top: 50%;left: 50%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d; } .container img {position: absolute;margin-left: -35px;margin-top: -50px; } .container img:nth-child(1){z-index: 1;opacity: .6; } .s1 img:nth-child(2){z-index: 2; -webkit-transform: translate3d(30px,30px,200px);-moz-transform: translate3d(30px,30px,200px);-ms-transform: translate3d(30px,30px,200px);-o-transform: translate3d(30px,30px,200px);transform: translate3d(30px,30px,200px); } 效果 ​​ ​​ 2.3D旋转 在三维变形中我们可以让元素在任何轴旋转。为此CSS3新增三个旋转函数rotateX()、rotateY()和rotateZ()。 随着度数的增加直观效果上 X以方框X轴从下向上旋转 Y以方框y轴从左向右旋转 Z以方框中心为原点顺时针旋转 ​​ ​​​​ ​​​​ ​​ rotate3d()中取值说明 x是一个0到之间的数值主要用来描述元素围绕X轴旋转的矢量值 y是一个到之间的数值主要用来描述元素围绕Y轴旋转的矢量值 z是一个到之间的数值主要用来描述元素围绕Z轴旋转的矢量值 a是一个角度值主要用来指定元素在3D空间旋转的角度如果其值为正值元素顺时针旋转反之元素逆时针旋转。 下面介绍的三个旋转函数功能等同 rotateX(a)函数功能等同于rotate3d(1,0,0,a) rotateY(a)函数功能等同于rotate3d(0,1,0,a) rotateZ(a)函数功能等同于rotate3d(0,0,1,a) 注a指的是一个旋转角度值。turn是圈1turn 360deg另外还有弧度rad2πrad 1turn 360deg。如transform:rotate(2turn); //旋转两圈 例子 .stage {width: 300px;height: 300px;float: left;margin: 15px;position: relative;background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;-webkit-perspective: 1200px;-moz-perspective: 1200px;-ms-perspective: 1200px;-o-perspective: 1200px;perspective: 1200px; } .container {position: absolute;top: 50%;left: 50%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d; } .container img {position: absolute;margin-left: -70px;margin-top: -100px; } .container img:nth-child(1){z-index: 1;opacity: .6; }.s4 img{z-index: 2; -webkit-transform:rotate3d(.6,1,.6,45deg);-moz-transform:rotate3d(.6,1,.6,45deg);-ms-transform:rotate3d(.6,1,.6,45deg);-o-transform:rotate3d(.6,1,.6,45deg);transform:rotate3d(.6,1,.6,45deg); } 效果 ​​ ​​ 3.3D缩放 通过使用3D缩放函数可以让元素在Z轴上按比例缩放。默认值为当值大于时元素放大反之小于大于0.01时元素缩小。当scale3d()中X轴和Y轴同时为1即scale3d(1,1,sz)其效果等同于scaleZ(sz)。 随着放大倍数的增加直观效果上 X以方框Y轴左右变宽 Y以方框X轴上下变高 Z看不出变换。scaleZ()和scale3d()函数单独使用时没有任何效果。 ​​ ​​​​ ​​​​ ​​ scaleZ()和scale3d()函数单独使用时没有任何效果需要配合其他的变形函数一起使用才会有效果。下面我们来看一个实例为了能看到scaleZ()函数的效果我们添加了一个rotateX(45deg)功能 例子 .s1 img:nth-child(2){z-index: 2; -webkit-transform: scaleZ(5) rotateX(45deg);-moz-transform: scaleZ(5) rotateX(45deg);-ms-transform: scaleZ(5) rotateX(45deg);-o-transform: scaleZ(5) rotateX(45deg);transform: scaleZ(5) rotateX(45deg); } .s2 img:nth-child(2){z-index: 2; -webkit-transform: scaleZ(.25) rotateX(45deg);-moz-transform: scaleZ(.25) rotateX(45deg);-ms-transform: scaleZ(.25) rotateX(45deg);-o-transform: scaleZ(.25) rotateX(45deg);transform: scaleZ(.25) rotateX(45deg); } 效果 ​​ ​​ 4.3D矩阵 CSS3中的3D矩阵要比2D中的矩阵复杂的多了从二维到三维是从到而在矩阵里头是3*3变成4*4到16了。话说又说回来对于3D矩阵而言本质上很多东西都与2D一致的只是复杂程度不一样而已。 3D矩阵即为透视投影推算方法与2D矩阵类似 ​​ ​​ 代码表示就是 matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) 5.3D倾斜 倾斜是二维变形不能在三维空间变形。元素可能会在X轴和Y轴倾斜然后转化为三维但它们不能在Z轴倾斜。 三.多重变形 在CSS3中不管是2D变形还是3D变形我们都可以使用多重变形他们之间使用空格分隔具体的语法如下 transform: transform-function transform-function * 其中transfrom-function是指CSS3中的任何变形函数。我们来看一个使用多重变形制作的立方体。先来看一个使用2D变形制作的立方体​​演示​​ !DOCTYPE html html langen headmeta charsetUTF-8titleDocument/titlestyle-webkit-keyframes spin{0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}100%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}-moz-keyframes spin{0%{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}100%{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}}-ms-keyframes spin{ 0%{-ms-transform:rotateY(0deg);transform:rotateY(0deg)} 100%{-ms-transform:rotateY(360deg);transform:rotateY(360deg)}}-o-keyframes spin{ 0%{-o-transform:rotateY(0deg);transform:rotateY(0deg)}100%{-o-transform:rotateY(360deg);transform:rotateY(360deg)}}keyframes spin{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}.stage {width: 300px;height: 300px;float: left;margin: 15px;position: relative;background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;-webkit-perspective: 1200px;-moz-perspective: 1200px;-ms-perspective: 1200px;-o-perspective: 1200px;perspective: 1200px;}.container {position: relative;height: 230px;width: 100px;top: 50%;left: 50%;margin: -100px 0 0 -50px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;}.container:hover{-moz-animation:spin 5s linear infinite;-o-animation:spin 5s linear infinite;-webkit-animation:spin 5s linear infinite;animation:spin 5s linear infinite;}.side {font-size: 20px;font-weight: bold;height: 100px;line-height: 100px;color: #fff;position: absolute;text-align: center;text-shadow: 0 -1px 0 rgba(0,0,0,0.2);text-transform: uppercase;width: 100px;}.top {background: #9acc53;-webkit-transform: rotate(-45deg) skew(15deg, 15deg);-moz-transform: rotate(-45deg) skew(15deg, 15deg);-ms-transform: rotate(-45deg) skew(15deg, 15deg);-o-transform: rotate(-45deg) skew(15deg, 15deg);transform: rotate(-45deg) skew(15deg, 15deg);}.left {background: #8ec63f;-webkit-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);-moz-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);-ms-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);-o-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);}.right {background: #80b239;-webkit-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);-moz-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);-ms-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);-o-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);}/style /head bodydiv classstage s1div classcontainerdiv classside top1/divdiv classside left2/divdiv classside right3/div/div/div /body /html ​​ ​​ 上例通过三个面使用多个2D变形制作的一个3D立方体接着我们在来使用3D多重变形制作一个3D立方体。​​演示​​ !DOCTYPE html html langen headmeta charsetUTF-8titleDocument/titlestyle-webkit-keyframes spin{0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}100%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}-moz-keyframes spin{0%{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}100%{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}}-ms-keyframes spin{0%{-ms-transform:rotateY(0deg);transform:rotateY(0deg)}100%{-ms-transform:rotateY(360deg);transform:rotateY(360deg)}}-o-keyframes spin{0%{-o-transform:rotateY(0deg);transform:rotateY(0deg)}100%{-o-transform:rotateY(360deg);transform:rotateY(360deg)}}keyframes spin{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}.stage {width: 300px;height: 300px;margin: 15px auto;position: relative;background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;-webkit-perspective: 300px;-moz-perspective: 300px;-ms-perspective: 300px;-o-perspective: 300px;perspective: 300px;}.container {top: 50%;left: 50%;margin: -100px 0 0 -100px;position: absolute;-webkit-transform: translateZ(-100px);-moz-transform: translateZ(-100px);-ms-transform: translateZ(-100px);-o-transform: translateZ(-100px);transform: translateZ(-100px);-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;}.container:hover{-moz-animation:spin 5s linear infinite;-o-animation:spin 5s linear infinite;-webkit-animation:spin 5s linear infinite;animation:spin 5s linear infinite;}.side {background: rgba(142,198,63,0.3);border: 2px solid #8ec63f;font-size: 60px;font-weight: bold;color: #fff;height: 196px;line-height: 196px;position: absolute;text-align: center;text-shadow: 0 -1px 0 rgba(0,0,0,0.2);text-transform: uppercase;width: 196px;}.front {-webkit-transform: translateZ(100px);-moz-transform: translateZ(100px);-ms-transform: translateZ(100px);-o-transform: translateZ(100px);transform: translateZ(100px);}.back {-webkit-transform: rotateX(180deg) translateZ(100px);-moz-transform: rotateX(180deg) translateZ(100px);-ms-transform: rotateX(180deg) translateZ(100px);-o-transform: rotateX(180deg) translateZ(100px);transform: rotateX(180deg) translateZ(100px);}.left {-webkit-transform: rotateY(-90deg) translateZ(100px);-moz-transform: rotateY(-90deg) translateZ(100px);-ms-transform: rotateY(-90deg) translateZ(100px);-o-transform: rotateY(-90deg) translateZ(100px);transform: rotateY(-90deg) translateZ(100px);}.right {-webkit-transform: rotateY(90deg) translateZ(100px);-moz-transform: rotateY(90deg) translateZ(100px);-ms-transform: rotateY(90deg) translateZ(100px);-o-transform: rotateY(90deg) translateZ(100px);transform: rotateY(90deg) translateZ(100px);}.top {-webkit-transform: rotateX(90deg) translateZ(100px);-moz-transform: rotateX(90deg) translateZ(100px);-ms-transform: rotateX(90deg) translateZ(100px);-o-transform: rotateX(90deg) translateZ(100px);transform: rotateX(90deg) translateZ(100px);}.bottom {-webkit-transform: rotateX(-90deg) translateZ(100px);-moz-transform: rotateX(-90deg) translateZ(100px);-ms-transform: rotateX(-90deg) translateZ(100px);-o-transform: rotateX(-90deg) translateZ(100px);transform: rotateX(-90deg) translateZ(100px);}/style /head bodydiv classstagediv classcontainerdiv classside front1/divdiv classside back2/divdiv classside left3/divdiv classside right4/divdiv classside top5/divdiv classside bottom6/div/div/div /body /html ​​ ​​ 四.3D Transform转换属性 属性 描述 CSS transform 向元素应用 2D 或 3D 转换。 3 transform-origin 允许你改变被转换元素的位置。 3 transform-style 规定被嵌套元素如何在 3D 空间中显示。 3 perspective 规定 3D 元素的透视效果。 3 perspective-origin 规定 3D 元素的底部位置。 3 backface-visibility 定义元素在不面对屏幕时是否可见。 3
1.transform-origin transform-origin变形的原点。默认情况变形的原点在元素的中心点或者是元素X轴和Y轴的50%处如下图 ​​ ​​ 我们没有使用transform-origin改变元素原点位置的情况下CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心变形原点位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作我们就可以使用transform-origin来对元素进行原点位置改变使元素原点不在元素的中心位置以达到需要的原点位置。 如果我们把元素变换原点transform-origin设置0x 0y这个时候元素的变换原点转换到元素的左顶角处如下图所示 ​​ ​​ 正如上图所示改变transform-origin属性的X轴和轴的值就可以重置元素变形原点位置其基本语法如下所示: transform-origin[percentage | length | left | center | right | top | bottom] | [percentage | length | left | center | right] | [[percentage | length | left | center | right] [percentage | length | top | center | bottom]] length ? 上面的语法让人看得发晕其实可以将语法拆分成 /只设置一个值的语法/ transform-origin: x-offset transform-origin:offset-keyword /设置两个值的语法/ transform-originx-offset y-offset transform-originy-offset x-offset-keyword transform-originx-offset-keyword y-offset transform-originx-offset-keyword y-offset-keyword transform-originy-offset-keyword x-offset-keyword /设置三个值的语法/ transform-originx-offset y-offset z-offset transform-originy-offset x-offset-keyword z-offset transform-originx-offset-keyword y-offset z-offset transform-originx-offset-keyword y-offset-keyword z-offset transform-originy-offset-keyword x-offset-keyword z-offset 2D的变形中的transform-origin属性可以是一个参数值也可以是两个参数值。如果是两个参数值时第一值设置水平方向X轴的位置第二个值是用来设置垂直方向轴的位置。 3D的变形中的transform-origin属性还包括了轴的第三个值。其各个值的取值简单说明如下 -x-offset用来设置transform-origin水平方向轴的偏移量可以使用length和percentage值同时也可以是正值从中心点沿水平方向轴向右偏移量也可以是负值从中心点沿水平方向轴向左偏移量。-offset-keyword是top、right、bottom、left或center中的一个关键词可以用来设置transform-origin的偏移量。-y-offset用来设置transform-origin属性在垂直方向轴的偏移量可以使用length和percentage值同时可以是正值从中心点沿垂直方向轴向下的偏移量也可以是负值从中心点沿垂直方向轴向上的偏移量。  -x-offset-keyword是left、right或center中的一个关键词可以用来设置transform-origin属性值在水平轴的偏移量。-y-offset-keyword是top、bottom或center中的一个关键词可以用来设置transform-origin属性值在垂直方向轴的偏移量。  -z-offset用来设置3D变形中transform-origin远离用户眼睛视点的距离默认值z0其取值可以length不过percentage在这里将无效。 看上去transform-origin取值与background-position取值类似。为了方便记忆可以把关键词和百分比值对比起来记 top top center center top 50% 0right right center center right 100%或(100% 50%)bottom bottom center center bottom 50% 100%left left center center left 0或(0 50%)center center center 50%或50% 50%top left left top 0 0right top top right 100% 0bottom right right bottom 100% 100%bottom left left bottom 0 100% 2.transform-style transform-style属性是3D空间一个重要属性指定嵌套元素如何在3D空间中呈现。他主要有两个属性值flat和preserve-3d。 transform-style属性的使用语法非常简单 transform-style: flat | preserve-3d 其中flat值为默认值表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。 也就是说如果对一个元素设置了transform-style的值为flat则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d它表示不执行平展操作他的所有子元素位于3D空间中。 transform-style属性需要设置在父元素中并且高于任何嵌套的变形元素。 例如 ​​ ​​ 要在.span里添加 transform-style: preserve-3d; 3.perspective perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置并将可视内容映射到一个视锥上继而投到一个2D视平面上。如果不指定透视则Z轴空间中的所有点将平铺到同一个2D视平面中并且变换结果中将不存在景深概念。 上面的描述可能让人难以理解一些其实对于perspective属性我们可以简单的理解为视距用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定值越小用户与3D空间Z平面距离越近视觉效果更令人印象深刻反之值越大用户与3D空间Z平面距离越远视觉效果就很小。 在3D变形中对于某些变形例如下面的示例演示的沿Z轴的变形perspective属性对于查看变形的效果来说必不可少。 我们先来看一个简单的实例制作一个扑克牌3D旋转效果并且一个在扑克牌的父元素添加了视距perspective而另一个却没有设置 div {width: 500px;height: 300px;margin: 30px auto;position: relative;background: url(images/bg-grid.jpg) no-repeat center center;background-size: 100% 100%; } div img {position: absolute;top: 50%;left: 50%;margin-left: -71px;margin-top: -100px; transform-origin: bottom; } div img:nth-child(1){opacity: .5;z-index: 1; } div img:nth-child(2){z-index: 2;transform: rotateX(45deg); } div:nth-of-type(2){perspective: 500px; } 效果如下 ​​ ​​ 上图的效果完全说明了一切。父节点没有设置perspective的情况下梅花King的3D旋转效果不明显而在父节点设置perspective后梅花King才像个3D旋转。 上例简单的演示了perspective的使用方法我们回过头来看看perspective的使用语法 perspectivenone | length perspective属性包括两个属性none和具有单位的长度值。其中perspective属性的默认值为none表示无限的角度来看3D物体但看上去是平的。另一个值length接受一个长度单位大于0的值。而且其单位不能为百分比值。length值越大角度出现的越远从而创建一个相当低的强度和非常小的3D空间变化。反之此值越小角度出现的越近从而创建一个高强度的角度和一个大型3D变化。 比如你站在10英尺和1000英尺的地方看一个10英尺的立方体。在10英尺的地方你距离立方体是一样的尺寸。因此视角转变远远大于站在1000英尺处的立体尺寸是你距离立方体距离的百分之一。同样的思维适用于perspective的length值。我们一起来看一个实例来加强这方面的理解​​演示​​ !DOCTYPE html html langen headmeta charsetUTF-8titleDocument/titlestyle.wrapper {width: 50%;float: left;}.cube {font-size: 4em;width: 2em;margin: 1.5em auto;transform-style: preserve-3d;transform: rotateX(-40deg) rotateY(32deg);}.side {position: absolute;width: 2em;height: 2em;background: rgba(255, 99, 71, 0.6);border: 1px solid rgba(0, 0, 0, 0.5);color: white;text-align: center;line-height: 2em;}.front {transform: translateZ(1em);}.top {transform: rotateX(90deg) translateZ(1em);}.right {transform: rotateY(90deg) translateZ(1em);}.left {transform: rotateY(-90deg) translateZ(1em);}.bottom {transform: rotateX(-90deg) translateZ(1em);}.back {transform: rotateY(-180deg) translateZ(1em);}.w1 {perspective: 100px;}.w2{perspective: 1000px;}/style /head bodydiv classwrapper w2div classcubediv classside front1/divdiv classside back6/divdiv classside right4/divdiv classside left3/divdiv classside top5/divdiv classside bottom2/div/div/divdiv classwrapper w1div classcubediv classside front1/divdiv classside back6/divdiv classside right4/divdiv classside left3/divdiv classside top5/divdiv classside bottom2/div/div/div /body /html ​​ ​​ 依据上面的介绍我们可对perspective取值做一个简单的结论 -perspective取值为none或不设置就没有真3D空间。 -perspective取值越小3D效果就越明显也就是你的眼睛越靠近真3D。 -perspective的值无穷大或值为0时与取值为none效果一样。 4.perspective-origin perspective-origin属性是3D变形中另一个重要属性主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置在该位置观看者好像在观看该元素的子元素。 perspective-origin属性的使用语法也很简单 perspective-origin[percentage | length | left | center | right | top | bottom] | [[percentage | length | left | center | right] [percentage | length | top | center | bottom]] 该属性的默认值为“50% 50%”(也就是center)其也可以设置为一个值也可以设置为两个长度值 第一个长度值指定相对于元素的包含框的X轴上的位置。它可以是长度值以受支持的长度单位表示、百分比或以下三个关键词之一left表示在包含框的X轴方向长度的0%center表示中间点,或right表示长度的100%。 第二个长度值指定相对于元素的包含框的Y轴上的位置。它可以是长度值、百分比或以下三个关键词之一top表示在包含框的Y轴方向长度的0%center表示中间点或bottom表示长度的100%。 注意为了指转换子元素变形的深度perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情它必须被定义在设置了perspective属性的元素上。换句话说perspective-origin属性需要与perspective属性结合起来使用以便将视点移至元素的中心以外位置 ​​ ​​ 5.backface-visibility backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。 backface-visibility属性使用语法 backface-visibility: visible | hidden 该属性被设置为以下两个关键词之一 visible为backface-visibility的默认值表示反面可见hidden表示反面不可见 一个元素的可见性与“backface-visibility:hidden”决定如下 元素在3D环境下渲染上下文将根据3D变形矩阵来计算反之元素不在3D环境下渲染上下文将根据2D变形矩阵来计算。 如果组件的矩阵在第3行、3列是负值那么元素反面是隐藏反之是可见的。 简单点来说backface-visibility属性可用于隐藏内容的背面。默认情况下背面可见这意味着即使在翻转后旋转的内容仍然可见。但当backface-visibility设置为hidden时旋转后内容将隐藏因为旋转后正面将不再可见。该功能可帮助您模拟多面的对象例如下例中使用的纸牌。通过将backface-visibility设置为hidden您可以轻松确保只有正面可见。 我们通过3D立方体来做一个实例让你能从视觉上更能直能的区分backface-visibility取值为hidden和visible的区别​​演示​​ !DOCTYPE html html langen headmeta charsetUTF-8titleDocument/titlestyle.container {width: 500px;height: 300px;float: left;position: relative;margin: 30px;border: 1px solid #CCC;perspective: 1200px;}.cube {width: 100%;height: 100%;position: absolute;animation: spinCube 8s infinite ease-in-out;transform-style: preserve-3d;transform: translateZ( -100px );}keyframes spinCube {0% { transform: translateZ( -100px ) rotateX( 0deg ) rotateY( 0deg ); }100% {transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }}.side {display: block;position: absolute;width: 196px;height: 196px;border: 2px solid black;line-height: 196px;font-size: 120px;font-weight: bold;color: white;text-align: center;}.cube.backface-visibility-visible .side {backface-visibility: visible;}.cube.backface-visibility-hidden .side {backface-visibility: hidden;}.cube .front { background: hsla( 0, 100%, 50%, 0.7 ); }.cube .back { background: hsla( 60, 100%, 50%, 0.7 ); }.cube .right { background: hsla( 120, 100%, 50%, 0.7 ); }.cube .left { background: hsla( 180, 100%, 50%, 0.7 ); }.cube .top { background: hsla( 240, 100%, 50%, 0.7 ); }.cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }.cube .front {transform: translateZ( 100px );}.cube .back {transform: rotateX( -180deg ) translateZ( 100px );}.cube .right {transform: rotateY( 90deg ) translateZ( 100px );}.cube .left {transform: rotateY( -90deg ) translateZ( 100px );}.cube .top {transform: rotateX( 90deg ) translateZ( 100px );}.cube .bottom {transform: rotateX( -90deg ) translateZ( 100px );} /style /head bodydiv classcontainerh1backface-visibility:visible/h1div classcube backface-visibility-visiblediv classside front1/divdiv classside back2/divdiv classside right3/divdiv classside left4/divdiv classside top5/divdiv classside bottom6/div/div/div div classcontainerh1backface-visibility:hidden/h1div classcube backface-visibility-hiddendiv classside front1/divdiv classside back2/divdiv classside right3/divdiv classside left4/divdiv classside top5/divdiv classside bottom6/div/div/div /body /html ​​ ​​ 上图中左边立方体每个页我们都能看得到而右边的立方体我们只能看到视力范围的面。