css3学习系列之移动属性详解

时间：2017-08-15

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对元素使用多重变形的示例</title>
    <style>
        div {
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform:rotate(45deg) scale(1.5) translate(150px,200px);
            -moz-transform:rotate(45deg) scale(1.5) translate(150px,200px);
            -o-transform: rotate(45deg) scale(1.5) translate(150px,200px);
        }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

先旋转，然后在放缩，最后移动

效果：

css3学习系列之移动属性详解

从两个示例的运行结果中我们可以看出，元素在两个页面上所处于位置并不相同。我们来看看他们的的详细步骤：

第一个示例：

1）首先向右移动150px，向下移动200px。

css3学习系列之移动属性详解

2）然后旋转45度，并且放大1.5倍。

css3学习系列之移动属性详解

第二个示例：

1）首先旋转45度，并且放大1.5倍。

css3学习系列之移动属性详解

2）然后向右移动150px，向下移动200px。

css3学习系列之移动属性详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：纯CSS设置Checkbox复选框控件的样式(五种方法) 下一篇：用CSS3实现无限循环的无缝滚动的实例代码

相关文章

最新文章