css3d转换_CSS转换

css3d转换

CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated using CSS animations.

在过去的几年中，CSS变得越来越强大，CSS转换就是一个很好的例子。 CSS转换允许对HTML元素进行复杂而强大的转换。 可以将一个或多个转换应用于给定元素，甚至可以使用CSS动画对转换进行动画处理 。

View Demo 观看演示

转换类型 (Transform Types)

There are several types of CSS transforms, each performing a different function.  The following are the transform types with example value:

CSS转换有几种类型，每种类型执行不同的功能。 以下是带有示例值的转换类型：

• transform: none

  transform: none

• transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)

  transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)

• transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)

  transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)

• transform: rotate(0.5turn)

  transform: rotate(0.5turn)

• transform: rotateX(3deg)

  transform: rotateX(3deg)

• transform: rotateY(3deg)

  transform: rotateY(3deg)

• transform: rotateZ(3deg)

  transform: rotateZ(3deg)

• transform: rotate3d(1, 2.0, 3.0, 3deg)

  transform: rotate3d(1, 2.0, 3.0, 3deg)

• transform: scale(3, 3.5)

  transform: scale(3, 3.5)

• transform: scaleX(3)

  transform: scaleX(3)

• transform: scaleY(0.6)

  transform: scaleY(0.6)

• transform: scaleZ(0.9)

  transform: scaleZ(0.9)

• transform: scale3d(2.5, 1.2, 0.3)

  transform: scale3d(2.5, 1.2, 0.3)

• transform: skewX(44deg)

  transform: skewX(44deg)

• transform: skewY(1.9rad)

  transform: skewY(1.9rad)

• transform: translate(12px, 20%)

  transform: translate(12px, 20%)

• transform: translateX(5em)

  transform: translateX(5em)

• transform: translateY(9in)

  transform: translateY(9in)

• transform: translateZ(4px)

  transform: translateZ(4px)

• transform: translate3d(40px, 20%, 5em)

  transform: translate3d(40px, 20%, 5em)

• transform: perspective(40px)

  transform: perspective(40px)

All text, imagery, background imagery, and other elements will be transformed accordingly.

所有文本，图像，背景图像和其他元素将进行相应的转换。

多重转换 (Multiple Transforms)

Applying multiple transforms to an element is simple:

将多个变换应用于元素很简单：

.myTransformElement {
	transform: scale(2) skewY(0.3) rotate(4deg);
}

Separate multiple transforms using spaces!

使用空格分隔多个变换！

兄弟属性：transform-origin (Sibling Property: transform-origin)

Transforms have a sibling property of transform-origin.  The transform-origin property provides a point of origin for the given transform to take place:

转换具有transform-origin的同级属性。 transform-origin属性提供给定转换发生的起点：

.myTransformElement {
	transform: scale(2) skewY(0.3) rotate(4deg);

	transform-origin: 0 0;
	transform-origin: 50% 50%;
	transform-origin: -5em 3em;
}

As you can see above, there are several formats of transform-origin to choose from.

如您在上面看到的，有多种转换源格式可供选择。

动画变换 (Animating Transforms )

Animating CSS transforms is just as easy as animating any other CSS property:

动画CSS转换就像动画其他CSS属性一样容易：

.container {
	transform: rotateY(2deg);
	transition: 0.6s;
	transition-property: transform;
}

.container:hover {
	transform: rotateY(180deg);
}

@keyframe animations can also be used to animate CSS transforms.

@keyframe动画也可以用于为CSS转换设置动画。

View Demo 观看演示

CSS转换示例 (CSS Transform Examples)

• Create a Photo Stack Effect with CSS

  使用CSS创建照片堆栈效果

• CSS Flip Animation

  CSS翻转动画

• CSS 3D Folding Animation

  CSS 3D折叠动画

翻译自: https://davidwalsh.name/transforms

css3d转换