css3scalez的简单介绍
CSS3翻转：第一行翻转了-45度，第二行翻转了45度，为什么在视觉上不对称呢，如何让第一行和第二行对称
整出来的效果：
我的css代码：
.main?{margin:?0?auto;?padding:?0;?width:?60%;?border:?3px?solid?#FB3;?height:?710px;
????position:?relative;
}
.one{
????height:?6em;?line-height:?6em;
????position:?absolute;?top:?0;?left:?0;?width:?100%;
????-webkit-perspective:150px;
????perspective:150px;
????-webkit-transform-origin:?center?top;
????transform-origin:?center?bottom;
}
.onediv,?.threediv?{
????-webkit-transform:rotate3d(1,0,0,-90deg)?scaleZ(3);
????transform:rotate3d(1,0,0,-45deg)?scaleZ(3);
????perspective:150px;
}
.two{
????position:?absolute;?top:?3.55em;?left:?0;
????height:?6em;?line-height:?6em;?width:?100%;
????-webkit-perspective:150px;
????perspective:150px;
????-webkit-transform-origin:?center?bottom;
????transform-origin:?center?top;
}
.twodiv,?.fourdiv?{
????-webkit-transform:rotate3d(1,0,0,45deg)?scaleZ(3);
????transform:rotate3d(1,0,0,45deg)?scaleZ(3);
????perspective:150px;
}
.three{
????height:?6em;?line-height:?6em;
????position:?absolute;?top:?9em;?left:?0;?width:?100%;
????-webkit-perspective:150px;
????perspective:150px;
????-webkit-transform-origin:?center?top;
????transform-origin:?center?bottom;
}
.four{
????height:?6em;?line-height:?6em;
????position:?absolute;?top:?12.5em;?left:?0;?width:?100%;
????-webkit-perspective:150px;
????perspective:150px;
????-webkit-transform-origin:?center?top;
????transform-origin:?center?bottom;
}
.red?{background-color:?red;?float:?left;?font-size:?4em;?width:?25%;?text-align:?center;}
.blue?{background-color:?blue;?float:?left;?font-size:?4em;?width:?25%;?text-align:?center;}
.green?{background-color:?green;?float:?left;?font-size:?4em;?width:?25%;?text-align:?center;}
.yellow?{background-color:?yellow;?float:?left;?font-size:?4em;?width:?25%;?text-align:?center;}
1、one，two，three，four这几个div都是舞台，容器元素，所以不在这几个上面应用3d变化。只是设置视角什么的。
他们的子元素设置变化。
2、one，two，这些元素使用了绝对定位。使用绝对定位主要是，大家变换以后中间有空隙，为了消除空隙，使用translate3d对Y进行变换消除空隙应该是不行的，因为变化以后相邻两个图形大小不一致了。当然3D空间中两个不一样大的东西在图片上看起来一样大，应该也是可以的，不过这个就很复杂了吧，只变化Y肯定是不行的。你的不对成应该主要就是因为这个。
3、one，two，这些容器元素我设置了高度，实际上也可以不设置高度，高度主要是用来计算消除空隙的，但是消除多少（也就是每个容器的top应该设置为多少）这个我现在也不会算，图里面是试出来的。不过看你的图没有空隙，你应该有自己的计算方法吧。
试了好久，想的脑袋疼 ＝。＝！
CSS3中如何使元素曲线运动
CSS3中使用transform属性可实现元素曲线运动。
下面介绍下transform 属性定义及其实例。
定义和用法：
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.transform="rotate(7deg)"
语法transform: none|transform-functions;
值 ????????描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义?2D?转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义?3D?转换，使用?16?个值的?4x4?矩阵。
translate(x,y) 定义?2D?转换。
translate3d(x,y,z) 定义?3D?转换。
translateX(x) 定义转换，只是用?X?轴的值。
translateY(y) 定义转换，只是用?Y?轴的值。
translateZ(z) 定义?3D?转换，只是用?Z?轴的值。
scale(x,y) 定义?2D?缩放转换。
scale3d(x,y,z) 定义?3D?缩放转换。
scaleX(x) 通过设置?X?轴的值来定义缩放转换。
scaleY(y) 通过设置?Y?轴的值来定义缩放转换。
scaleZ(z) 通过设置?Z?轴的值来定义?3D?缩放转换。
rotate(angle) 定义?2D?旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义?3D?旋转。
rotateX(angle) 定义沿着?X?轴的?3D?旋转。
rotateY(angle) 定义沿着?Y?轴的?3D?旋转。
rotateZ(angle) 定义沿着?Z?轴的?3D?旋转。
skew(x-angle,y-angle) 定义沿着?X?和?Y?轴的?2D?倾斜转换。
skewX(angle) 定义沿着?X?轴的?2D?倾斜转换。
skewY(angle) 定义沿着?Y?轴的?2D?倾斜转换。
perspective(n) 为?3D?转换元素定义透视视图。
浏览器支持：
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
实例：
实例A：
旋转?div?元素：
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg);? /*?IE?9?*/
-moz-transform:rotate(7deg);? /*?Firefox?*/
-webkit-transform:rotate(7deg);?/*?Safari?和?Chrome?*/
-o-transform:rotate(7deg);? /*?Opera?*/
}
CSS3 转换。
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
translate()?方法
通过?translate()?方法，元素从其当前位置移动，根据给定的?left（x?坐标）?和?top（y?坐标）?位置参数：
实例
div
{
transform:?translate(50px,100px);
-ms-transform:?translate(50px,100px); /*?IE?9?*/
-webkit-transform:?translate(50px,100px); /*?Safari?and?Chrome?*/
-o-transform:?translate(50px,100px); /*?Opera?*/
-moz-transform:?translate(50px,100px); /*?Firefox?*/
}
注：Internet Explorer 9 需要前缀 -ms-。
css3 transition transfrom translate animate 有什么区别？
transition, transform, tanslate,animation分别为过渡，变换，平移、动画。transform的属性包括：rotate() / skew() / scale() / translate(,) 。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
为了更好地理解 transform 属性，请查看这个演示。
默认值：none
继承性：no
版本：CSS3
JavaScript 语法：object.style.transform="rotate(7deg)"
语法
transform: none|transform-functions;
值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
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);
}
}
}
}
css3 scale3d scalez怎么看出效果
caale3d分别有三个值（x，y，z），也就是说他包含了，scaleZ他就是3d的最后一个值
不知道你对css2了解多少，z相当于z-index