【零基础学习web前端】CSS3-2D变换（移动、旋转）

Amy

【零基础学习web前端】CSS3-2D变换（移动、旋转）

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

• CSS变换改变元素的位置和形状。
• CSS变换可以将仿射线性变换应用于HTML元素。
• 这些变换包括在平面和3D空间中的旋转，倾斜，缩放和平移。
  

css转换属性

• transform - 指定要应用于元素的变换。
• transform-origin - 指定原点的位置。默认情况下，它在元素的中心。
  

移动  translate()方法

[CSS] 纯文本查看 复制代码

div{
    width: 100px;
    height: 100px;
    background-color: #2f65ff;
    border: 1px solid black;
}
.box{
     -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
    transform: translate(50px,100px); /* Standard syntax */
}

[HTML] 纯文本查看 复制代码

<div>
        苏飞论坛
    </div>
    <div class="box">
        苏飞论坛
    </div>

translate(50px,100px) 把元素移动从左边50像素，从顶部100像素
效果：



旋转  rotate()方法
使用rotate()方法以给定的度数顺时针旋转元素。也可以使用负值逆时针旋转元素。

例如：

[CSS] 纯文本查看 复制代码

div{
    width: 100px;
    height: 100px;
    background-color: #2f65ff;
    border: 1px solid black;
}
.box{
     -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg); /* Standard syntax */
}

[HTML] 纯文本查看 复制代码

<div>
        苏飞论坛
    </div>
    <div class="box">
        苏飞论坛
    </div>

transform: rotate(30deg)，将元素顺时针旋转30度。效果

竹林风

真是难得给力的帖子啊。

liu

感恩无私的分享与奉献