zoukankan      html  css  js  c++  java
  • CSS3骚样式补充

    一、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,会什么也看不见。

  • 相关阅读:
    安全编码1
    VPP tips
    VPP概述汇总
    C语言安全编码摘录
    TCP-proxy
    Scipy Lecture Notes学习笔记(一)Getting started with Python for science 1.4. Matplotlib: plotting
    Scipy Lecture Notes学习笔记(一)Getting started with Python for science 1.3. NumPy: creating and manipulating numerical data
    Scipy Lecture Notes学习笔记(一)Getting started with Python for science 1.2. The Python language
    Scipy Lecture Notes学习笔记(一)Getting started with Python for science 1.1. Python scientific computing ecosystem
    25马5跑道,求最快的五匹马的需要比赛的次数
  • 原文地址:https://www.cnblogs.com/jiayouba/p/11876936.html
Copyright © 2011-2022 走看看