css3d转换_CSS转换：简介

css3d转换

Making elements look different under certain conditions has always been possible in CSS, initiated by simple pseudo-classes like :hover. CSS transforms, coupled with keyframe animations and transitions, simply extend this capability into movement.

在CSS中 ，始终可以通过某些简单的伪类(如:hover使元素在某些条件下看起来不同。 CSS变换与关键帧动画和过渡结合在一起，可以简单地将此功能扩展到移动中。

This ability runs up against traditional uses of JavaScript and Flash, and is beginning to supplement and replace both in these areas. As a result, JavaScript is slowly being shifted back to where it is most appropriate: in browser interaction and scripting, rather than appearance and effects.

此功能与JavaScript和Flash的传统用法背道而驰，并且已开始在这两个方面进行补充和替换。 结果，JavaScript正在缓慢地移回到最合适的位置：浏览器交互和脚本编写，而不是外观和效果。

Transforms are officially still in working draft status at the W3C. All modern browser versions use the established spec; Safari 8 (mobile and desktop), IE9 and Android 4.4.4 (and earlier) use vendor prefixes on the property. The base transformations are rotate, skew, scale and translate, with a matrix property to allow all four transformations to be implemented at once. In many ways, scale and translate are just handy alternatives to manipulating the properties left, top, right, bottom, width and height, but skew and rotate are completely new:

转换在W3C上仍处于工作草案状态。 所有现代浏览器版本均使用已建立的规范。 Safari 8(移动和台式机)，IE9和Android 4.4.4(及更低版本)在属性上使用供应商前缀 。 基本转换是rotate ， skew ， scale和translate ，具有matrix属性，以允许同时实施所有四个转换。 在许多方面， scale和translate只是操纵属性left ， top ， right ， bottom ， width和height方便替代方法，但是skew和rotate是全新的：

By default, transforms take place from the computed centre of an element. In order to change this, you must alter the transform-origin property.

默认情况下，变换发生从一个元素的计算的中心 。 为了更改此设置，必须更改transform-origin属性。

To create a transformation, use the transform property and attach the transform you wish to use, with the appropriate values in parentheses:

要创建转换，请使用transform属性并使用括号中的适当值附加您要使用的转换：

body { transform: rotate(9deg); }

A new addition to the specification makes rotate, scale, translate and skew properties. That is, the mistake I constantly made when writing transforms for the first few years:

规范的新增加使rotate ， scale ， translate和skew 属性成为可能 。 就是说，在最初的几年里，我不断犯的错误转变了：

body { rotate: 9deg; }

Will actually be valid CSS, and work in the browser. However, this addition is very new, and only the most beta of browser versions currently supports it. The code is not yet ready for prime-time, unless you are using a pre- or post-processor that will automatically translate this use of the spec into CSS that is compatible with current browsers.

实际上将是有效CSS，并且可以在浏览器中工作。 但是 ，此添加是非常新的，并且当前只有大多数beta版本的浏览器支持它。 该代码尚未准备就绪，除非您正在使用预处理器或后处理器，该处理器会自动将此规范的使用转换为与当前浏览器兼容CSS。

There are also 3D CSS transforms, which are the subject of an entire reading list.

还有3D CSS转换，它们是整个阅读列表的主题 。

翻译自: https://thenewcode.com/273/CSS-Transformations-Introduction

css3d转换