css3transform3d,css3transform菜鸟

css3中的transform、transition、translate、animation

transform：属性应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)、倾斜,扭曲(skew)，设置基点位置transform-origin:50% top;

?rotate:? ? ? ? ?是transform的值，定义2D或3D的旋转，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

? ? ? ? ? ? ? ? ? ? ?2D：rotate( angle )定义 2D 旋转，在参数中规定角度。

? ? ? ? ? ? ? ? ? ? ?3D：rotate3d( x , y , z , angle )定义 3D 旋转。

? ? ? ? ? ? ? ? ? ? ?事例：2D:transform: rotate(45deg);3D:ransform: rotate3d(0,0,0,45deg)

scale:? ? ? ? ? ?是transform的值，定义 2D 或3D缩放，表示对当前元素的缩放。

? ? ? ? ? ? ? ? ? ? 2D：scale(x,y)定义 2D 缩放，对当前元素的宽度是原始大小的x倍，高度是原始大小的y倍。

? ? ? ? ? ? ? ? ? ? 3D：scale3d( x , y , z )定义 3D 缩放，对当前元素在x轴，y轴，z轴的缩放。

? ? ? ? ? ? ? ? ? ? 事例：2D:scale: scale(2,3);3D:ransform:?scale3d(0,0,1)

translate? ：是transform的值，定义 2D 或3D转换，表示对当前元素的位移。

? ? ? ? ? ? ? ? ? ? 2D：translate( x , y )定义 2D 转换，沿着 X 和 Y 轴移动元素。

? ? ? ? ? ? ? ? ? ?3D：translate3d( x , y , z )定义 3D 转化。

? ? ? ? ? ? ? ? ? ?事例：2D:transform: translate(50px,100px);3D:ransform: translate3d(50px,100px,50px)

skew：? ? ? ?是transform的值，定义倾斜，表示对当前元素的倾斜角度。

? ? ? ? ? ? ? ? ? ?skew( x-angle , y-angle )定义 2D 倾斜，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

? ? ? ? ? ? ? ? ? ?事例：transform: skew(1deg,2deg)

transition属性：允许CSS属性值在一定的时间区间内平滑的过渡，只能设置 初始值和结束值，需要事件的触发，例如单击、获取焦点、失去焦点等

? ? ? ? ? ? ? ? ? ? ? ? transition : transition-property ? transition-duration ? transition-timing-function ? transition-delay ;

? ? ? ? ? ? ? ? ? ? ? ? transition-property :规定应用过渡的 CSS 属性的名称。

? ? ? ? ? ? ? ? ? ? ? transition-duration :定义过渡效果花费的时间。默认是 0。

? ? ? ? ? ? ? ? ? ? ? transition-timing-function :规定过渡效果的时间曲线。默认是 "ease"。

? ? ? ? ? ? ? ? ? ? ? transition-delay :规定过渡效果延迟的时间。默认是 0。

? ? ? ? ? ? ? ? ? ? ? 事例：? transition :?width 2s ease-in-out? 1s

animation属性：通过帧动画对当前元素的某些属性进行帧动画的播放，功能相似于transition，但更加的精确、可以控制到每一帧，高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前? ? ? ? ? ? ? ? ? ? ? ? ? ? 状态等，请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

? ? ? @keyframes fadeIn {

? ? ? ? ? ? ? ? ? ? 0% {opacity:0; }

? ? ? ? ? ? ? ? ? 100% {opacity:1;}

? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ? ? ? 事例：animation:fadeIn?5s infinite;（fadeIn是帧动画的名称）infinite 无限循环

@keyframes fadeIn {

0% {opacity:0;}

100% {opacity:1;}

}

@keyframes fadeout {

0% {opacity:1;}

100% {opacity:0;}

}

@keyframes pendulu?{

from {transform:rotate3d(0,0,1,0);}

5.5% {transform:rotate3d(0,0,1,-11deg);}

7% {transform:rotate3d(0,0,1,-12deg);}

16% {transform:rotate3d(0,0,1,9deg);}

17.5% {transform:rotate3d(0,0,1,10deg);}

26.5% {transform:rotate3d(0,0,1,-7deg);}

28% {transform:rotate3d(0,0,1,-8deg);}

36.5% {transform:rotate3d(0,0,1,5deg);}

38% {transform:rotate3d(0,0,1,6deg);}

46.5% {transform:rotate3d(0,0,1,-4deg);}

48% {transform:rotate3d(0,0,1,-5deg);}

57% {transform:rotate3d(0,0,1,3deg);}

58.5% {transform:rotate3d(0,0,1,4deg);}

66.5% {transform:rotate3d(0,0,1,-2deg);}

68% {transform:rotate3d(0,0,1,-3deg);}

75% {transform:rotate3d(0,0,1,1.5deg);}

76.5% {transform:rotate3d(0,0,1,2.5deg);}

82.5% {transform:rotate3d(0,0,1,-1deg);}

84% {transform:rotate3d(0,0,1,-2deg);}

90% {transform:rotate3d(0,0,1,1.5deg);}

95% {transform:rotate3d(0,0,1,-1deg);}

to {transform:rotate3d(0,0,1,0);}

}

@keyframes scale {

0% {transform:scale(0.9);}

100% {transform:scale(1);}

}

@keyframes cloud {

0% {transform:translateX(0);}

25% {transform:translateX(30%);}

50% {transform:translateX(60%);}

75% {transform:translateX(30%);}

100% {transform:translateX(0);}

}

@keyframes? fadeInDown

{

0%?{

? ? opacity:?0;

? ? filter:?alpha(opacity=0);

? ? -webkit-transform:?translate3d(0, -100%, 0);

? ? transform:?translate3d(0, -100%, 0);

}

100%?{

? ? opacity:?1;

? ? filter:?alpha(opacity=100);

? ? -webkit-transform:?none;

? ? /* transform:?none; */

}}

@-webkit-keyframes bounceIn {

0%,20%,40%,60%,80%,100% {

-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);

transition-timing-function:cubic-bezier(.215,.61,.355,1)

}

0% {

opacity:0;

filter:alpha(opacity=0);

-webkit-transform:scale3d(2,2,2);

transform:scale3d(2,2,2)

}

40% {

-webkit-transform:scale3d(.9,.9,.9);

transform:scale3d(.9,.9,.9)

}

60% {

-webkit-transform:scale3d(1.03,1.03,1.03);

transform:scale3d(1.03,1.03,1.03)

}

80% {

opacity:1;

filter:alpha(opacity=100);

-webkit-transform:scale3d(.97,.97,.97);

transform:scale3d(.97,.97,.97)

}

100% {

-webkit-transform:scale3d(1,1,1);

transform:scale3d(1,1,1)

}

}

.rotate2d {

-webkit-animation-timing-function:linear;

animation-timing-function:linear;

-webkit-animation-name:rotate2d;

animation-name:rotate2d

}

.box-bottle {

position:absolute;

left:70%;

width:pr(99);

height:pr(97);

background:url("#{$imgPath}btn-bottle.png")no-repeat;

background-size:100%;

transform-origin:35% 68%;

opacity:0;

z-index:10;

div {

position:absolute;

width:pr(18);

height:pr(35);

transform:translate3d(-150%,-20%,0)rotate3d(0,0,1,100deg);

transition:opacity .5s linear 1.5s;

}

i {

position:absolute;

width:pr(18);

height:pr(35);

background-repeat:no-repeat;

background-size:100%;

transform-origin:3000% 50%;

opacity:0;

:nth-child(1) {

transition:transform 1s ease-out 1s,opacity .2s linear .9s;

background-image:url("#{$imgPath}water1.png");

}

:nth-child(2) {

transition:transform 1.1s ease-out .9s,opacity .2s linear .8s;

background-image:url("#{$imgPath}water2.png");

}

:nth-child(3) {

transition:transform 1.2s ease-out .8s,opacity .2s linear .7s;

background-image:url("#{$imgPath}water3.png");

}

:nth-child(4) {

transition:transform 1.3s ease-out .7s,opacity .2s linear .6s;

background-image:url("#{$imgPath}water4.png");

}

:nth-child(5) {

transition:transform 1.4s ease-out .6s,opacity .2s linear .5s;

background-image:url("#{$imgPath}water5.png");

}

:nth-child(6) {

transition:transform 1.5s ease-out .5s,opacity .2s linear .4s;

background-image:url("#{$imgPath}water6.png");

}

}

.active {

opacity:1;

animation:pour 2.5s both;

div {

opacity:0;

}

i {

opacity:1;

:nth-child(1) {

transform:rotate3d(0,0,1,-25deg);

}

:nth-child(2) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,50%,0);

}

:nth-child(3) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,0,0);

}

:nth-child(4) {

transform:rotate3d(0,0,1,-25deg)translate3d(0,150%,0);

}

:nth-child(5) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,200%,0);

}

:nth-child(6) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,150%,0);

}

}

}

}

如何重置 html5 css3 transform 3d x y z

你的.axis没有设置3D视角所以当执行rotateY就当作只有2D变换，看不到3D的Z轴了

正确的代码应该是这样的

舞台设置perspective

容器设置preserve-3d

子元素rotate3d

所以代码应该改为

.camera {

width: 600px;

height: 600px;

-webkit-perspective: 1000px;

perspective: 1000px;

margin: auto auto;

}

css3系列之transform详解translate

translate这个参数的，是transform 身上的，那么它有什么用呢？

其实他的作用很简单，就是平移，参考自己的位置来平移

translate()

translateX()

translateY()

translateZ()

translate3d()

translateX

向X轴平移，填正数往右平移，填负数，往左平移。

向Y轴平移，填正数往下平移，填负数，往上平移

向Z轴平移，这个可能有点难理解，想像一个场景，你现在和电脑屏幕的距离，这就是Z轴的距离，电脑屏幕离你越近，那么translateZ() 里面的值 越大，? 电脑屏幕离你越远， translateZ() 的值就越小。 所以说，Z 增加，那么这个电脑屏幕，离你就越近，下面要用到旋转，首先Z 轴是朝向我们的，所以 看不出效果，但是，我们把它转个身，让Z轴 面对 右边，就可以了。

translate()? 和? translate3d()

translate 是同时设置? translateX? 和 translateY， 所以里面可以填两个参数， 第一个值 X? 第二个 Y

translate3d 是同时设置? translateX? ，translateY 和 translateZ 所以里面可以填三个参数

只不过有点不同的是， translate 如果第二个参数不填的话，默认是0， 不过translate3d的话，人家就不同意你不填了，你三个参数，必须都给我填。

CSS3 matrix3d矩阵变换和动画变换

3d变换我们首先要弄清楚坐标轴的方向， 3D变形的坐标轴则是X,Y,Z三条轴组成的立体空间，X轴正方向是朝右，Y周正方向是朝下，Z轴正方向是朝屏幕外

假定都是在三维空间中，平面坐标应该更加简单，刻画一个点的向量应该: [x, y, z]

所谓变换矩阵就是指，该矩阵 X 坐标向量 可以得到变换后的新坐标，满足如下性质

"平移"后 的坐标 = 平行移动变换矩阵 X 原始坐标

"缩放"后 的坐标 = 缩放移动变换矩阵 X 原始坐标

"旋转"后 的坐标 = 旋转移动变换矩阵 X 原始坐标

"斜切"后 的坐标 = 斜切移动变换矩阵 X 原始坐标

初始化的变换矩阵

初始化的变换乘法后的结果

所以matrix3d的默认值

观察者站轴的正方向看向负方向，旋转物体，逆时针为负，顺时针为正。

其中有

可以得到旋转矩阵

移动的变换矩阵

dx: x轴移动的距离

dy: y轴移动的距离

dz: z轴移动的距离

缩放的变换矩阵

斜切是最不好理解的，符合右手定则，如果y轴斜切角度，是指垂直Y轴逆时针旋转一定的角度后的坐标

在前端开发中，我们采用的动画方案有主帧动画 、 补间动画、骨骼动画 等等

借助css3的transform，我们可以实现很流畅的补间动画

如果物体发生了上面的几种变换，可以把上面所有矩阵依次序相乘，然后就得到了最终的变换矩阵

由此我们可以看出来 一个css变换举证 M 总可以写成一个

M = SRT

其中 S 是缩放举证 R 是旋转矩阵 T是缩放举证

变换过程中，我们可以对S R T 分别实现补间动画，来进行变换动画