css3平移，css动画平移切换图片

css3系列之transform详解translate

在css3中transform主要包括以下几种： 旋转rotate、 扭曲skew、 缩放scale 和 移动translate 以及 矩阵变形matrix。

在CSS3中，translate是一种用于元素变换的CSS属性，它可以改变元素的位置，不影响其在文档流中的位置。translate属性可以应用于2D和3D变换。

下面要用到旋转，rotate，不懂的话，请点击→ css3系列之transform 详解rotate 首先Z 轴是朝向我们的，所以 看不出效果，但是，我们把它转个身，让Z轴 面对 右边，就可以了。

article div：nth-child(2) { transform： translateY(100px)； } 使用 translate 可以控制按X、Y同时移动操作，第一个值控制X移动，第二个值控制Y移动。

相关问答

Q1: html正方形沿着边缘走一圈怎么弄

1、先画一个需要的圆形，再画一个需要的正方形，再复制一个正方形，两个正方形间留一定距离，选中两个正方形，用互动式渐变工具，从一个正方形拉到另一个正方形处，要多少个就在上方工具例输入数量。

2、如图，直径d的圆绕正方形ABCD绕一周，得到的图形就是正方形外围的阴影。

3、÷4=104（米）这块正方形菜地的边长是104米。因为沿正方形菜地的边缘走一圈是416米，这个数字正好是正方形菜地的周长，周长÷4就是边长。

Q2: css高级属性有哪些

1、IE 6，7，8支持CSS3的部分属性。介绍htc，它可以让IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。

2、transition 属性是一个简写属性，用于设置四个过渡属性。CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。

3、object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能 import规则一定要先于除了@charset的其他任何CSS规则。

4、CSS样式还可以实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括3种效果：分页、光标和过滤器。在CSS规则定义”对话框左侧选择“扩展”项，可以在右边区域设置CSS样式的扩展格式。

5、CSS语法由三部分构成，分别：选择器、属性和值。

Q3: 12.CSS3的Transform详解

rotate：旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center)加上 transform-origin 设置旋转点。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

下面要用到旋转，rotate，不懂的话，请点击→ css3系列之transform 详解rotate 首先Z 轴是朝向我们的，所以 看不出效果，但是，我们把它转个身，让Z轴 面对 右边，就可以了。

这是一个缩放的transform属性，y值可以省略，如果y值省略的话，那默认就和x值一样。举例：这个例子的执行效果就是，当把指针hover到这个div上的时候，那这个div会放大到原来的1倍大。

css3平移的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css动画平移切换图片、css3平移的信息别忘了在本站进行查找喔。