苏飞论坛

标题: 【零基础学习web前端】CSS3-2D变换（移动、旋转） [打印本页]

---

作者: Amy    时间: 2018-12-9 18:24
标题: 【零基础学习web前端】CSS3-2D变换（移动、旋转）


【零基础学习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像素
效果：
(, 下载次数: 170)

上传

点击文件名下载附件


旋转  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度。效果
(, 下载次数: 154)

上传

点击文件名下载附件

---

作者: 竹林风    时间: 2018-12-9 18:50
真是难得给力的帖子啊。

---

作者: liu    时间: 2018-12-9 20:28
感恩无私的分享与奉献

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4