CSS3中Transform动画属性用法详解(5)
前面我们提到的transform的方法都是基于元素的中心来变换的,也就是元素变换的基点默认是元素的中心。但是有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin来对元素进行基点位置改变。该属性可以接收三个参数: transform-origin: x-axis y-axis z-axis;
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-origin演示</title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ width: 800px; height: 150px; border: 1px solid blue; margin: 20px auto; padding: 20px 20px; } #div1 ,#div2, #div3, #div4{ height: 100px; width: 100px; border: 1px dashed red; display: inline-block; } #div1 div{ height: 100px; width: 100px; background: #63F7ED; (编辑:ASP站长网) |