CSS3的变形功能

最新推荐文章于 2022-04-07 17:28:12 发布
最新推荐文章于 2022-04-07 17:28:12 发布
阅读量194 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SSLUKA/article/details/106628243
版权

transform功能的使用

  1. transform：功能；
  2. -ms-transform：功能；/* IE9 */
  3. -moz-transform: 功能;/Firefox/
  4. -webkit-transform: 功能;/Safari 和 Chrome/
  5. -o-transform:功能;/Opera/

rotate旋转，在参数中规定角度

1.使用方法：

  1. -ms-transform: rotate(角度);/IE9/
  2. -moz-transform: rotate(角度);/Firefox/
  3. -webkit-transform: rotate(角度);/Safari 和 Chrome/
  4. -o-transform: rotate(角度);/Opera/

2.对比

  • 旋转前
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
        }
    </style>
</head>
<body>
<h1>rotate旋转</h1>
<div></div>
</body>
</html>

在这里插入图片描述
*旋转后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
            -ms-transform: scale(45deg);/*IE9*/
            -moz-transform: rotate(45deg);/*Firefox*/
            -webkit-transform: rotate(45deg);/*Safari 和 Chrome*/
            -o-transform: rotate(45deg);/*Opera*/
        }
    </style>
</head>
<body>
<h1>rotate旋转</h1>
<div></div>
</body>
</html>

在这里插入图片描述

scale缩放转换

1.使用方法
transform：scale（值）
tip：他的值是指定的缩放倍数，比如0.5就是缩放到50%，1就是100%，1.5就是放大到150%
可能的值：
1）scale（x,y）：使元素X轴和Y轴同时缩放
2）scaleX（x）：元素仅X轴缩放
3）scaleY（y）：元素仅Y轴缩放
Ps 负数对其效果无用，仍会以绝对值的大小来进行缩放
2.举例

  • 旋转前
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
            -ms-transform:scale(0.5,0.5);/*IE9*/
            -moz-transform:scale(0.5,0.5);/*Firefox*/
            -webkit-transform: scale(0.5,0.5);/*Safari 和 Chrome*/
            -o-transform:scale(0.5,0.5);/*Opera*/
        }
    </style>
</head>
<body>
<h1>scale旋转</h1>
<div></div>
</body>
</html>

在这里插入图片描述

  • 旋转后
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
        }
        div:hover{/*伪类选择器，鼠标移动至元素时，进行转换*/
            -ms-transform:scale(2,2);/*IE9*/
            -moz-transform:scale(2,2);/*Firefox*/
            -webkit-transform: scale(2,2);/*Safari 和 Chrome*/
            -o-transform:scale(2,2);/*Opera*/
        }
    </style>
</head>
<body>
<h1>scale旋转</h1>
<div></div>
</body>
</html>

在这里插入图片描述

倾斜skew

1.使用方法
transform：skew（值）
tip：他的值使角度
可能的值：
1）skew（x，y）：使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定角度值进行扭曲变形）只有一个参数时，只在水平方向上倾斜。
2）skewX（x）仅使元素在水平方向扭曲变形（X轴扭曲变形）
3）skewY（y）仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
2.举例

  • 1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
        }
        div:hover{/*伪类选择器，鼠标移动至元素时，进行转换*/
            -ms-transform:skew(30deg);/*IE9*/
            -moz-transform:skew(30deg);/*Firefox*/
            -webkit-transform: skew(30deg);/*Safari 和 Chrome*/
            -o-transform:skew(30deg);/*Opera*/
        }
    </style>
</head>
<body>
<h1>倾斜skew</h1>
<div></div>
</body>
</html>

在这里插入图片描述

  • 2
<style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
        }
        div:hover{/*伪类选择器，鼠标移动至元素时，进行转换*/
            -ms-transform:skew(30deg);/*IE9*/
            -moz-transform:skew(30deg);/*Firefox*/
            -webkit-transform: skew(30deg,30deg);/*Safari 和 Chrome*/
            -o-transform:skew(30deg);/*Opera*/
        }/*当鼠标移动至元素时，元素会变大至原来的两倍*/
    </style>

在这里插入图片描述

移动translate

1.使用方法
transform：translate（值）
tip：他的值使指定移动的距离
可能的值：
1)translate(x,y) 水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 只有一个参数时，只在水平方向上移动；
2）translateX(x）仅水平方向移动（X轴移动）
3）translateY(y）仅垂直方向移动（Y轴移动）

2.举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
        }
        div:hover{/*伪类选择器，鼠标移动至元素时，进行转换*/
            -ms-transform:translate(50px,50px);/*IE9*/
            -moz-transform:translate(50px,50px);/*Firefox*/
            -webkit-transform: translate(50px,50px);/*Safari 和 Chrome*/
            -o-transform:translate(50px,50px);/*Opera*/
        }
    </style>
</head>
<body>
<h1>移动translate</h1>
<div></div>
</body>
</html>

在这里插入图片描述

对一个元素使用多种变形的方法

1.使用方法
transform：方法1 方法2 方法3 方法4；
tip 同样的动画只能指定一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
        }
        div:hover{/*伪类选择器，鼠标移动至元素时，进行转换*/
            -ms-transform:translate(50px,50px) rotate(30deg);/*IE9*/
            -moz-transform:translate(50px,50px) rotate(30deg);/*Firefox*/
            -webkit-transform: translate(100px) rotate(30deg);/*Safari 和 Chrome*/
            -o-transform:translate(50px,50px) rotate(30deg);/*Opera*/
        }
    </style>
</head>
<body>
<h1>transform属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述

改变元素基点transform-origin

1.可能的值：

top lefttopright top
leftcenterright
bottom leftbottombottom right

2.举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: brown;
            transform-origin: bottom right;
        }
        div:hover{/*伪类选择器，鼠标移动至元素时，进行转换*/
            -ms-transform:rotate(30deg);/*IE9*/
            -moz-transform:rotate(30deg);/*Firefox*/
            -webkit-transform:rotate(30deg);/*Safari 和 Chrome*/
            -o-transform:rotate(30deg);/*Opera*/
        }
    </style>
</head>
<body>
<h1>transform属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述

SSLUKA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3变形基础
Kilitou的博客
05-20 351
一、css3变形 语法：transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 1.rotate(旋转) a) rotateX(180deg) 沿x轴旋转180度 等价于 rotate3d(1,0,0,180deg) b) rotateY(180deg) 沿y轴旋转180度 等价于 rotate3d(0,1,0,180deg) c)...
总结CSS3变形transform属性
zerlinda_c的博客
12-08 890
在网页设计中，css被习惯于理解为擅长表现静态样式，动态的元素必须借助于flash或javascript才可以实现，CSS3将来改变这一思维方式。CSS3除了增加很大革命性的创新功能外，还提供了对动画的支持，可以实现旋转，缩放，移动，倾斜和过渡效果等等，这些功能再一次证明了CSS功能的强大和无限潜能。　　CSS3实现元素变形的基础。来源于新增的transform属性，该元素可用于实现元素的旋转，缩放
CSS动画（1）
chnejgeo的博客
06-27 246
前言：CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。 比transition动画功能更强大的是a
CSS3中的变形与动画
枫ゞ的博客
03-02 397
一、变形 旋转 rotate() 通过指定的角度参数使元素相对原点进行旋转。 主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。 正值 元素相对原点中心顺时针旋转 负值 元素相对原点中心逆时针旋转 用法如下： transform: rotate(45deg); 扭曲 skew() 让元素倾斜显示 可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜 skew（）不会旋转，但会改变元素的形状 用法如下： skew(x,y) .
css变形-扭曲(skew())
weixin_44550096的博客
02-15 1512
开发工具与关键技术：css skew属性 作者：黄海峰 撰写时间：2019.02.15 Css变形中的第二个属性扭曲(skew())，做一个样本，然后添加shew属性，看看会有什么变化。 浏览器打开： 然后我们添加属性 浏览器刷新下，正方形就被扭曲了： ...
可调节CSS3变形金刚特效
06-24
5. **兼容性**：虽然CSS3的许多功能已被现代浏览器广泛支持，但在实际应用中，为了确保跨浏览器兼容性，通常需要引入前缀（如`-webkit-`，`-moz-`，`-ms-`，`-o-`）或者使用像autoprefixer这样的工具自动处理。...
浅谈CSS3中的变形功能-transform功能
09-24
主要介绍了浅谈CSS3中的变形功能-transform功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS3变形金刚霸天虎图标特效特效代码
03-20
【CSS3变形金刚霸天虎图标特效】是一种利用现代浏览器支持的CSS3技术来创建的动态视觉效果。这种特效能够将静态的图标转化为具有动画效果的变形金刚霸天虎形象，给网页增添互动性和趣味性。CSS3是层叠样式表...
CSS3文字变形3D阴影效果特效代码
03-20
CSS3，作为层叠样式表的最新版本，引入了一系列强大的功能，包括但不限于动画、过渡、变换以及丰富的文本和边框效果。这些新特性使得网页设计更加动态且富有表现力。特别是对于文字变形和3D效果，CSS3提供了前所未有...
可调节CSS3变形金刚特效.zip
07-11
总的来说，“可调节CSS3变形金刚特效”是CSS3强大功能的一个生动实例，结合了变换、过渡和JavaScript交互，为用户提供了一种创新的视觉体验。通过深入理解这些技术，开发者可以创建更多富有创意和吸引力的网页元素和...
CSS中的变形
weixin_49758946的博客
07-07 660
CSS3的变形功能可以对HTML组件执行位移,旋转,缩放,倾斜4中几何变换,这样的变换可以控制HTML组件呈现出丰富的外观。 CSS3动画---transform变形 transform:该属性用于设置变形,该属性支持一个或多个变形函数. rotate(angle):该函数用于设置元素旋转的度数。 Skew(sx,yx):该函数用于设置元素的一个扭曲效果。 Scale(x,y):该函数让元素根据中心原点对对象进行缩放 translate(tx,ty):该函数用于设置元素的位移。 旋转rotat
transform的使用方法
热门推荐
说故事的五公子
08-03 1万+
transform的含义是：改变，使…变形；转换 在排版当中去合理的使用transform会使我们的排版看起来高大上那么一点。 接下来给大家介绍一下这个神奇的小东西都有什么属性会有什么效果。 1.旋转rotate rotate：通过指定的角度参数对原元素指定一个效果。 如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)； 2.移动translate translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
CSS3中的变形功能-transform功能
z983002710的博客
07-30 4155
CSS3中的变形功能-transform功能
CSS动画与变形（一）-------transform变形
chenmo2001的博客
05-17 1818
CSS动画与变形（一） ———变形 一、简介： CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助与位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指...
变形--扭曲 skew()
10-23 843
变形--扭曲 skew() 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角...
CSS3中的变形--扭曲 skew()
lorry的博客
06-06 1572
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 第一个参数对应X轴，第二个参数...
【网页开发】css关于移动端自适应以及transform的scale()缩放白边问题
小卓仗剑走天涯的博客
01-19 5996
css关于移动端自适应以及移动端transform的scale()缩放白边问题
CSS3的变形
karry_yuan的博客
04-07 1658
inline-block和float的区别 及 CSS3变形
CSS3 元素的变形（transform）
actorWen的博客
12-13 6364
CSS3新增了transform属性，可用于元素的变形，实现元素的旋转、缩放、移动、倾斜等 变形效果。 transform基于webkit内核的替代私有属性是-webkit-transforn;   基于gecko内核的替代私有属性是-moz-transform;   基于presto内核的替代私有属性是-o-transform;   基于IE浏览器的替代私有属性是-ms-transfo
农产品动画制作-变形.pptx
最新发布
11-01
transform属性是CSS3中的核心功能之一，它允许元素在一个坐标系统中进行各种变形操作。其基本语法格式是`transform: none|transform-functions;`，其中`none`表示默认情况下不进行任何变形，而`transform-functions`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值