码迷,mamicode.com
首页 > Web开发 > 详细

CSS3骚样式补充

时间:2019-11-17 17:39:37      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:spec   而不是   大于   pre   ott   otto   内容   flat   一个   

一、transform-origin 属性

设置旋转元素的基点位置,2D 转换元素能够改变元素 x 和 y 轴,3D 转换元素还能改变其 Z 轴。

必须与 transform 属性一同使用,不然不会有任何效果。

 

1、x-axis(以y轴为旋转中心时,元素(y轴)在x轴上的位置)

定义视图被置于 X 轴的何处。可能的值:

  • left
  • center
  • right
  • length
  • %

2、y-axis(以x轴为旋转中心时,元素(x轴)在y轴上的位置)

定义视图被置于 Y 轴的何处。可能的值:

  • top
  • center
  • bottom
  • length
  • %

3、z-axis(以z轴为旋转中心,元素在z轴上的位置)

定义视图被置于 Z 轴的何处。可能的值:

  • length

注:length为正负px,%就是百分比。

4、默认值与解释

默认值为
  transform-origin:50% 50% 0;

即  

  transform-origin:x-50%;

  transform-origin:y-50%;

  transform-origin:x-0px;

也等同于

  transform-origin:center center 0px;

第一个值为X,第二个值为Y,第三个为Z。

假设有一个宽高都等于100px的元素,定义它有x、y、z三条轴,x、y轴把元素平分为50*50四份,相当于一个“田”字,中间的“十”字为x、y轴,这就是默认值。

x值为50%(center),意为当元素要绕着y轴旋转时,y轴在x轴的正中间;如果x值小于0%(为负),y轴会在元素的左侧,如果x值大于100%,y轴会在元素的右侧。

y值为50%(center),意为当元素要绕着x轴旋转时,x轴在y轴的正中间;如果y值小于0%(为负),x轴会在元素的上面,如果y值大于100%,x轴会在元素的下面。

z值为0px,意为元素在当前的2D位面上不做移动;如果为负,意为在3D空间向里移动,如果大于0,意为在3D空间向外移动。

注:三条轴就像元素旋转时的参照中心,中心可以在元素里面,也可以在外面。(中心在元素内,有点像地球自转,中心在元素外,开起来类似地球绕着太阳公转)。

二、transform-style 属性

规定如何在 3D 空间中呈现被嵌套的元素。

1、flat

子元素将不保留其 3D 位置。

2、preserve-3d

子元素将保留其 3D 位置。

注:

transform-style属性必须与 transform 属性一同使用。

给一个元素设置 transform属性,当transform涉及到3D,元素就会需要一个3D环境,此时就需要给元素的父元素设置transform-style:preserve-3d;。

三、perspective 属性

perspective 属性定义 3D 元素距视图的距离,只影响 3D 转换元素,当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。

用法:perspective: number;(直接给数字,不给单位)元素距离视图的距离,以像素计。

      perspective: none;默认值。与 0 相同。不设置透视。

注:类似模拟人眼看东西时,远了会变小这样子,有点不是很懂,不过透视效果蛮好看。

四、backface-visibility 属性

定义当元素不面向屏幕时是否可见。

1、visible

背面是可见的。当元素旋转180deg,会看见元素内容的反面效果。

2、hidden

背面是不可见的。当元素旋转180deg,会什么也看不见。

CSS3骚样式补充

标签:spec   而不是   大于   pre   ott   otto   内容   flat   一个   

原文地址:https://www.cnblogs.com/jiayouba/p/11876936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!