刚才又试了一下其他浏览器,发现如果用IE浏览器的话,效果和老师视频里的效果是一样的。side-back会以翻转了180度的姿态覆盖在side-front上。但是在chrome下就是我们遇到问题的样子。背后的机制是什么我讲不出来,但是可以肯定你我的代码没问题,是浏览器内核渲染时候的差别问题。 1 回复 #1 微风灬唐唐 提问者 ...
2d效果可以拆开写成 translateX(x)、translateY(y),也可以直接写成translate(x,y),缩写中如果只写了一个值,默认是x; 3d效果还有 translateZ(z),缩写 translate3d(x,y,z),3d效果中缩写的话,就必须得写3个值,少一个都不行,没有的值可以设为0; rotate rotate(旋转) 可以设负值;正值是顺时针旋转,负值是...
transform: rotateY(180deg); } .stage:nth-child(1) .container{ transform: rotateY(0deg); } .stage:nth-child(2) .container{ transform: rotateY(30deg); } .stage:nth-child(3) .container{ transform: rotateY(60deg); } .stage:nth-child(4) .container{ transform: rotateY(90deg); } ....
transform: rotateY(180deg); } .stage:nth-child(1) .container{ transform: rotateY(0deg); } .stage:nth-child(2) .container{ transform: rotateY(30deg); } .stage:nth-child(3) .container{ transform: rotateY(60deg); } .stage:nth-child(4) .container{ transform: rotateY(90deg); } ....
scale(x,y) 设置盒子缩放 首先看看原来div的大小,如下: 设置y轴放大2倍,效果如下: 那么如果,同时设置x轴缩小到0.5倍呢,效果如下: rotate(deg) 设置盒子旋转 演示这个旋转,我画两个div,一个不变作为参照,另一个旋转看看。 可以看出,这是顺时针选择45度的效果。
1、translate(x,y) 设置盒子位移 2、scale(x,y) 设置盒子缩放 3、rotate(deg) 设置盒子旋转 4...
transform:rotateY(-180deg); } } .paper[data-right]{ transform-origin: left center; animation: flip-to-left2sease-in-out; } 需要设置变换中心为左边中间的位置,效果如下: 我们发现有几个问题,第1个问题是翻过去的后面的那个paper没有显示出来,因为一开始把没显示出来的paper都隐藏了,所以需要把后面那个...
rotateY(angle)3D 旋转,沿Y轴旋转角度 transform: scale(x, y) 每次进行变换都是根据最原始位置坐标系进行变换。 例如: 先设置rotate(45deg)图像会转45度, 再设置旋转45deg是没有效果的,因为已经旋转了45deg。 scale()会使坐标系比例发生变换,其子元素的变换都会根据新的坐标系变换 ...
face2{rotate:Y90deg;translate:00200px; } //... 1. 2. 3. 4. 5. 则整个效果就变成了: 因为这里实际执行的顺序是,先 translate,后 rotate。 所以,实际使用的时候一定要注意,矩阵变换的顺序会影响最终的效果。如果对顺序有严格的要求,还是需要合在一起写。
rotate scale 具体的语法会有一点点不同,具体使用的时候,多看看文档,譬如 translate 接收 3 个参数,第 2、3 个参数如果不存在,则为零(例如:translate: 50% 50% 0)。又譬如 rotate ,如果想改变 Y 轴的旋转角度,可以这样写 rotate: y 30deg 。