0064 2D转换综合写法以及顺序问题：translate rotate scale

2D 转换综合写法以及顺序问题
  1. 知识要点

    • 同时使用多个转换，其格式为 transform: translate() rotate() scale()
    • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
    • 但我们同时有位置或者其他属性的时候，要将位移放到最前面
  2. 代码演示 
    div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }

        div:hover {
            /* transform: rotate(180deg) translate(150px, 50px); */
            /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
            transform: translate(150px, 50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

原文地址：https://www.cnblogs.com/jianjie/p/12127179.html

时间： 2024-10-19 03:28:54

0064 2D转换综合写法以及顺序问题：translate rotate scale的相关文章

css3之2D转换

css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享以下. 这里,我将会介绍到以下转换方法: translate() rotate() scale() skew() 首先,我们先插入一个简单的html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

动画，2D转换，，3D转换怎样运用

动画 @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果. 属性{[email protected] 2animation } 如:@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {b

【Demo】CSS3 2D转换

2D转换: 2D变换方法: translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } translate值(50px,100px)是从左边元素移动50个像

CSS3 2D 转换

2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg);

CSS3 2D 转换【旋转transform:rotate（30deg）; 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】

CSS3 2D 转换 CSS3 转换 CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素. 它是如何工作? 变换的效果,让某个元素改变形状,大小和位置. 您可以转换您使用2D或3D元素. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Property           transform 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5

csss3 2D转换

CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 它如何工作? 转换是使元素改变形状.尺寸和位置的一种效果. 您可以使用 2D 或 3D 转换来转换您的元素. 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 transform 属性. Chrome 和 Safari 需要前缀 -webkit-. 注释:Internet Explorer 9 需要前缀 -ms-. 2D 转换 在本章中,您将学到如下 2D 转换方法

css3学习笔记之2D转换

translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html> <head> <style>  div { width:100px; height:75px; background-color:red; border:1px

CSS 2D转换

转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 而2D转换的函数一共分为五大类: translate()   定义位移的函数:其中后面的参数分别是相对x轴,y轴的偏移的距离,单位为像素,形式:translate(30px,30px);表示相对x轴,y轴偏移30像素值

##CSS 2D 转换##

通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. <br>2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据给定的x坐标和y坐标位置参数,将元素移动到新的位置 <br>rotate(数值deg):元素顺时针旋转给定的角度,允许负值,元素将逆时针旋转. <br>scale(宽度数值,高度数值):元素的尺寸会增加或减少,根据给定的宽度和高度参数. <br>skew