css3转换transform 移动旋转缩放

最新推荐文章于 2024-05-16 09:59:55 发布
最新推荐文章于 2024-05-16 09:59:55 发布
阅读量978 收藏 1
点赞数
分类专栏： web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33878431/article/details/84390912
版权

css3转换transform 移动旋转缩放

###transform

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate

1.rotate、scale、translate、skew
  • 旋转 依次为 z轴、z轴 、x轴 、y轴
    rotate(30deg) rotateZ(30deg) rotateX(30deg) rotateY(30deg)
  • 缩放 依次为 x方向y方向、x方向、y方向
    scale: scale(1.2,0.8) scaleX(1.2) scaleY(0.8)
  • 位移 依次为 x方向y方向、x方向、y方向
    translate(20px,-30px) translateX(20px) translateY(-30px)
    -扭曲 依次为 x轴y轴、x轴、y轴
    skew(anglex,angley) skewX(angle) skewY(angle)
    演示
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS3转换</title>
   <style>
       body {
           margin: 0;
           padding: 0;
           font-family: '微软雅黑';
           background-color: #F7F7F7;
       }

       .wrapper {
           width: 1024px;
           margin: 0 auto;
       }

       .wrapper > section {
           width:100px;
           height:100px;
           margin-bottom: 20px;
           box-shadow: 1px 1px 4px #DDD;
           background-color: #FFF;
           float:left;
           margin-right:20px;
       }
       section > .wrap-box {
           position:relative;
       }
       section > header {
           margin-bottom:20px;
       }
       .oldbox {
           width:50px;
           height:50px;
           position:absolute;
           top:0;
           left:50%;
           margin-left:-25px;
           border:1px dashed red;
           z-index:2;
           box-sizing:border-box;
       }
       .box {
           width: 50px;
           height: 50px;
           background-color: yellow;
           margin:0 auto;
           position:absolute;
           top:0;
           left:50%;
           margin-left:-25px;
           z-index: 1;
       }
       .rotate .box {
           transform:rotate(275deg) translate(0px,10px) scale(1.2);
       }
       .rotate1 .box {
           transform:rotate(-45deg);
       }
       .scale .box {
           transform:scale(0.5);
       }
       .scale1 .box {
           transform:scale(0.5,1.2);
       }
       .translate .box {
           transform:translateX(-30px);
       }
       .translate1 .box {
           transform:translate(20px,20px);
       }
       .skew .box {
           transform:skew(45deg);
       }
       .skew1 .box {
           transform:skew(20deg,20deg);
       }
   </style>
</head>
<body>
<div class="wrapper">
   <header>CSS3-转换</header>
   <section class="rotate">
       <header>旋转0</header>
       <div class="wrap-box">
           <div class="oldbox"></div>
           <div class="box"></div>
       </div>
   </section>
   <section class="rotate1">
       <header>旋转1</header>
       <div class="wrap-box">
           <div class="oldbox"></div>
           <div class="box"></div>
       </div>
   </section>
   <section class="scale">
       <header>缩放0</header>
       <div class="wrap-box">
           <div class="oldbox"></div>
           <div class="box"></div>
       </div>
   </section>
   <section class="scale1">
       <header>缩放1</header>
       <div class="wrap-box">
           <div class="oldbox"></div>
           <div class="box"></div>
       </div>
   </section>
   <section class="translate">
       <header>移动0</header>
       <div class="wrap-box">
           <div class="oldbox"></div>
           <div class="box"></div>
       </div>
   </section>
   <section class="translate1">
       <header>移动1</header>
       <div class="wrap-box">
           <div class="oldbox"></div>
           <div class="box"></div>
       </div>
   </section>
   <section class="skew">
       <header>倾斜0</header>
       <div class="wrap-box">
           <div class="oldbox"></div>
           <div class="box"></div>
       </div>
   </section>
   <section class="skew1">
       <header>倾斜1</header>
       <div class="wrap-box">
           <div class="oldbox"></div>
           <div class="box"></div>
       </div>
   </section>
</div>
</body>
</html>

image.png

###2.transform-origin

  • transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。
    语法：
    `
    transform-origin: x-axis y-axis z-axis

`

名称值描述
x-axis位置（left、center、right）/ 百分数 / 数值x轴
y-axis位置（top、center、bottom）/ 百分数 / 数值y轴基点坐标
z-axis数值z轴基点坐标

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3转换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑';
            background-color: #F7F7F7;
        }
        .wrapper {
            width: 1024px;
            margin: 0 auto;
        }
        .wrapper > section {
            width:100px;
            height:100px;
            margin-bottom: 20px;
            box-shadow: 1px 1px 4px #DDD;
            background-color: #FFF;
            float:left;
            margin-right:20px;
        }
        section > .wrap-box {
            position:relative;
        }
        section > header {
            margin-bottom:20px;
        }
        .oldbox {
            width:50px;
            height:50px;
            position:absolute;
            top:0;
            left:50%;
            margin-left:-25px;
            border:1px dashed red;
            z-index:2;
            box-sizing:border-box;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: yellow;
            margin:0 auto;
            position:absolute;
            top:0;
            left:50%;
            margin-left:-25px;
            z-index: 1;
        }
        .rotate .box {
            transform-origin:center center;
            transform:rotate(45deg);
        }
        .rotate1 .box {
            transform-origin:right bottom;
            transform:rotate(45deg);
        }
        .rotate2 .box {
            transform-origin:50% 50%;
            transform:rotate(45deg);
        }
        .rotate3 .box {
            transform-origin:100% 100%;
            transform:rotate(45deg);
        }
        .rotate4 .box {
            transform-origin:25px 25px;
            transform:rotate(45deg);
        }
        .rotate5 .box {
            transform-origin:50px 50px;
            transform:rotate(45deg);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <header>CSS3-转换</header>
    <section class="rotate">
        <header>旋转0</header>
        <div class="wrap-box">
            <div class="oldbox"></div>
            <div class="box"></div>
        </div>
    </section>
    <section class="rotate1">
        <header>旋转1</header>
        <div class="wrap-box">
            <div class="oldbox"></div>
            <div class="box"></div>
        </div>
    </section>
    <section class="rotate2">
        <header>缩放2</header>
        <div class="wrap-box">
            <div class="oldbox"></div>
            <div class="box"></div>
        </div>
    </section>
    <section class="rotate3">
        <header>缩放3</header>
        <div class="wrap-box">
            <div class="oldbox"></div>
            <div class="box"></div>
        </div>
    </section>
    <section class="rotate4">
        <header>移动4</header>
        <div class="wrap-box">
            <div class="oldbox"></div>
            <div class="box"></div>
        </div>
    </section>
    <section class="rotate5">
        <header>移动5</header>
        <div class="wrap-box">
            <div class="oldbox"></div>
            <div class="box"></div>
        </div>
    </section>
</div>
</body>
</html>

效果

image.png

prettyRain
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例
NewHouser的博客
10-25 5885
transform: translate(水平移动距离，垂直移动距离);//距离的取值可以是数字或百分比向右向下为正数，向左向上为负数括号内只填一个值，默认为水平方向移动的距离
CSS动画中的 transform 之 scale（缩放）
wcxrib的博客
01-31 2475
分别对元素在X轴或Y轴上执行缩放操作，如果x或y的值为0到1之间的数值，则元素会缩小；如果它们的值大于1，则会放大。
移动端-转换transfrom和动画
最新发布
G24gg的博客
05-16 1263
CSS动画是CSS3的一个特性，它允许开发者在网页上创建动画效果，而无需使用JavaScript。CSS动画通过在特定时间内对元素的样式进行平滑的过渡来实现。CSS动画是现代网页设计中不可或缺的一部分，能够为用户带来更加丰富和动态的体验。通过合理使用CSS动画，可以使网页更加生动和有趣。用定位 translate(-50%, -%50)的时候要注意复合起来。注意：属性中间加逗号。
CSS3 之2D变换（旋转，缩放，位移，矩阵函数）
努力，追梦的博客
05-02 1万+
CSS3 之2D变换   l transform •     rotate()  旋转函数 取值度数 –    deg  度数 –    Transform-origin旋转的基点 •     skew()倾斜函数 取值度数 –    skewX() –    skewY() •     scale()缩放函数 取值 正数、负数和小数 –    scaleX() –
css-移动&缩放元素
weixin_30904593的博客
11-21 314
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 用法：object.style.transform="rotate(7deg)" 1、旋转：rotate(30deg);（顺时针旋转30°） 2、2D移动：translate(x,y)（右移到x，下移到y） 3、3D移动：translate3d(x,y,z) 4、横向移动：tra...
CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会）
m0_62360527的博客
06-06 3182
通过transform2D转换我么可以做一些简单的动画效果 以及让页面更规整 移动：translate 旋转：rotate 缩放：scale 本篇文章将会讲解上面这三个属性，文章包含个人理解（错误请指出）
CSS3转换功能transform主要属性值分析及实现分享
09-25
CSS3的转换（transform）功能是现代网页设计中不可或缺的一部分，它允许开发者对元素进行二维或三维空间的操作，包括旋转、缩放、斜切、平移等，从而创造出丰富的动态效果。这一特性极大地提升了用户体验，使得网页...
纯CSS3制作3D旋转球体
11-04
总结来说，纯CSS3制作3D旋转球体涉及的关键知识点有：`transform`属性、`rotateX`和`rotateY`用于3D旋转、`perspective`定义观察者视角、`animation`实现动态效果以及`border-radius`创建圆形。通过巧妙地组合这些...
js+css3图片3D旋转轮播特效
06-09
通过3D转换，我们可以创建出具有深度感的视觉效果，例如旋转、缩放和移动元素，使得网页元素在屏幕上呈现出立体空间的变化。CSS3的`transform`属性用于执行2D或3D转换，例如`rotateX()`, `rotateY()`, `rotateZ()`...
纯CSS3正多面体旋转动画特效
07-24
3D转换是CSS3的一个强大特性，允许元素在3D空间内进行移动、旋转和缩放。要创建3D效果，我们需要设置`transform-style: preserve-3d;`属性，确保子元素保留其3D空间位置。然后，使用`rotateX()`, `rotateY()`, 和 `...
CSS-Transform属性
m0_73559209的博客
08-12 719
【代码】CSS-Transform属性。
html5+css3实现鼠标移动拖动改变大小位置和旋转
09-08
采用html5+css3+jqurey实现类似word操作图片，拖动修改图片大小，拖动旋转，拖动改变位置。
CSS3笔记2— transform旋转、缩放、倾斜、移动
erdouzhang
03-13 6210
1.旋转CSS：<style> div { width: 200px; height: 200px; background-color: pink; -ms-transform: rotate(45deg);/*IE9*/ -moz-transform: rotate(45deg);/*Firefox*/ -webkit-trans
css3移动加旋转中遇到的问题
Antg的博客
04-16 368
在写作业的过程中发现移动加上旋转的话，就会发生想不到的效果 经过一番研究发现，如果你将旋转的中心设置为右上，旋转x度，水平移动a，垂直移动b。 那么元素的最终位置判断方法： 先将元素水平移动a,垂直移动b 然后以元素初始位置的右上角旋转角度x 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compa
css3移动旋转缩放
Candy_mi的博客
05-31 2548
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。  》》2D转换  属性有：transformtransform-origin---transform-origin:20% 40% ; 设置旋转元素的基点位置（值可以是left right... 百分比  长度单位）属性值有：translate(50px,100px）--x轴y轴移动  rotate(30deg)--旋转角度（默认顺时...
transform（平移、旋转、缩放、3d转换）、渐变、动画笔记
Yous的博客
07-04 1万+
2. 表单属性–交互表单属性 CSS3 1. 选择器 1.1 属性选择器 1.2 结构伪类选择器 1.3 伪元素选择器 2. css属性 2.1 平面转换transform 2.1.1 平移 平移还在原来的文档流，平移后的位置也可以重叠。 2.1.3 多重转换 2.1.5 渐变背景 案例1 给图片蒙上渐变色 流程如下： 主要是平移和伪元素的使用 给盒子的和分别装上图片的左半和右半，设置盒子，悬停时将图片移开。 可以给盒子加隐藏移开时的超出部分。w3school 3
前端transform属性
weixin_52166438的博客
10-09 2108
Transform属性应用于元素的2D或3D转换。 这个属性允许你将元素 旋转 rotate();缩放 scale();移动 skew();倾斜 translate()等。 旋转rotate() transform:rotate(旋转的角度); transform:rotateX(沿X轴旋转的角度); transform: rotateY(沿Y轴旋转的角度); 缩放scale() transform: scale(沿X轴放大的倍数, 沿Y轴放大的倍数); transform: scaleX(沿X轴放大的
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
热门推荐
xuan的博客
08-23 2万+
1 transform属性 在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。 （1）浏览器支持 到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。  2 旋转 使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。...
css3transform
07-28
CSS3 Transform 是一种 CSS3 的属性，用于对元素进行转换和变形。它可以通过一些函数来实现平移、旋转、缩放和倾斜等效果，让页面元素具有更加丰富的交互和动画效果。 常见的 CSS3 Transform 函数包括： - ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值