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动画对转换进行动画处理 。
转换类型 (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转换设置动画。
CSS转换示例 (CSS Transform Examples)
css3d转换