您现在的位置是：网站首页> 编程资料编程资料
浅谈CSS3中的变形功能-transform功能CSS3中设置3D变形的transform-style属性详解CSS3的常见transformation图形变化用法小结
2023-10-20
255人已围观
简介 这篇文章主要介绍了浅谈CSS3中的变形功能-transform功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3中的变形功能：在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。
1、如何使用transform功能：
（1）在CSS3中通过transform属性来实现transform功能：
（2）transform功能使用方法：
transform:功能;
-ms-transform:功能;/*IE9*/
-moz-transform:功能;/*Firefox*/
-webkit-transform:功能;/*Safari和chrome*/
-o-transform:功能;/*Opera*/
2、rotate旋转，在参数中规定角度（rotate表示的是顺时针旋转，deg是CSS3中的角度单位）：
（1）使用方法：
-ms-transform:rotate(角度);/*IE9*/
-moz-transform:rotate(角度);/*Firefox*/
-webkit-transform:rotate(角度);/*Safari和chrome*/
-o-transform:rotate(角度);/*Opera*/
（2）rotate旋转的应用：
1）HTML代码：
2）CSS代码：
div{ width: 300px; height: 300px; background-color: lightblue; -ms-transform:rotate(45deg);/*IE9*/ -moz-transform:rotate(45deg);/*Firefox*/ -webkit-transform:rotate(45deg);/*Safari和chrome*/ -o-transform:rotate(45deg);/*Opera*/ } 3）效果图如下：
3、scale缩放转换：
（1）使用方法：transform:scale(值)，他的值是指定的缩放倍率，比如0.5就是缩放50%，1就是缩放100%，1.5就是缩放150%；
-ms-transform:scale(值);/*IE9*/
-moz-transform:scale(值);/*Firefox*/
-webkit-transform:scale(值);/*Safari和chrome*/
-o-transform:scale(值);/*Opera*/
（2）可能的值：
1）scale(x,y)使元素X轴和Y轴同时缩放；
2）scale(x)使元素仅X轴缩放；
3）scale(y)使元素仅Y轴缩放；
（3）scale缩放转换的应用：
1）HTML代码：
2）CSS代码：
div{ width: 300px; height: 300px; background-color: lightblue; /*缩放值X与Y为正整数时*/ -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*/ /*缩放值X与Y均为小于1的浮点数时*/ /*-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*/ /*缩放值仅X为小于1的浮点数时*/ /*-ms-transform:scaleX(0.5);*//*IE9*/ /*-moz-transform:scaleX(0.5);*//*Firefox*/ /*-webkit-transform:scaleX(0.5);*//*Safari和chrome*/ /*-o-transform:scaleX(0.5);*//*Opera*/ /*缩放值仅Y为小于1的浮点数时*/ /*-ms-transform:scaleY(0.5);*//*IE9*/ /*-moz-transform:scaleY(0.5);*//*Firefox*/ /*-webkit-transform:scaleY(0.5);*//*Safari和chrome*/ /*-o-transform:scaleY(0.5);*//*Opera*/ } 3）效果图如下：
①未缩放时的效果图：
②缩放值X与Y为正整数时的效果图：
③缩放值X与Y均为小于1的浮点数时的效果图：
④缩放值仅X为小于1的浮点数时的效果图：
⑤缩放值仅Y为小于1的浮点数时的效果图：
4、倾斜skew：
（1）使用方法：
transform:skew(角度);它的值是角度；
-ms-transform:skew(角度);/*IE9*/
-moz-transform:skew(角度);/*Firefox*/
-webkit-transform:skew(角度);/*Safari和chrome*/
-o-transform:skew(角度);/*Opera*/
（2）可能的值：
1）skew(x,y)使元素在水平方向和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)只有一个参数的时候，只在水平方向上倾斜；
2）skewX(x)仅使元素在水平方向上扭曲变形(X轴扭曲变形)
3）skewY(y)仅使元素在垂直方向上扭曲变形(Y轴扭曲变形)
（3）倾斜skew的应用：
1）HTML代码：
2）CSS代码：
div{ width: 300px; height: 300px; background-color: lightblue; /*X轴与Y轴均倾斜*/ -ms-transform:skew(30deg,30deg); -moz-transform:skew(30deg,30deg); -webkit-transform:skew(30deg,30deg); -o-transform:skew(30deg,30deg); /*设置一个值相当于仅X轴倾斜*/ /*-ms-transform:skew(30deg);*//*IE9*/ /*-moz-transform:skew(30deg);*//*Firefox*/ /*-webkit-transform:skew(30deg);*//*Safari和chrome*/ /*-o-transform:skew(30deg);*//*Opera*/ /*仅X轴倾斜*/ /*-ms-transform:skewX(30deg);*//*IE9*/ /*-moz-transform:skewX(30deg);*//*Firefox*/ /*-webkit-transform:skewX(30deg);*//*Safari和chrome*/ /*-o-transform:skewX(30deg);*//*Opera*/ /*仅Y轴倾斜*/ /*-ms-transform:skewY(30deg);*//*IE9*/ /*-moz-transform:skewY(30deg);*//*Firefox*/ /*-webkit-transform:skewY(30deg);*//*Safari和chrome*/ /*-o-transform:skewY(30deg);*//*Opera*/ } 3）效果图如下：
①未倾斜的效果图：
②X轴与Y轴均倾斜的效果图：
③设置一个值相当于仅X轴倾斜的效果图：
④仅X轴倾斜的效果图：
⑤仅Y轴倾斜的效果图：
5、移动translate：
（1）使用方法：
transform:translate(值);它的值是指定移动的距离；
-ms-transform:translate(值);/*IE9*/
-moz-transform:translate(值);/*Firefox*/
-webkit-transform:translate(值);/*Safari和chrome*/
-o-transform:translate(值);/*Opera*/
（2）可能的值：
1）translate(x,y)水平方向与垂直方向同时移动(也就是X轴和Y轴同时移动)只有一个参数的时候，只在水平方向上移动；
2）translateX(x)仅水平方向(X轴移动)
3）translateY(y)仅垂直方向(Y轴移动)
（3）移动translate的应用：
1）HTML代码：
2）CSS代码：
.main{ width: 100%; height: 500px; background-color: lightcoral; } .div{ width: 300px; height: 300px; background-color: lightblue; /*在X轴与Y轴上均移动*/ -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*/ /*设置一个值相当于仅在X轴上移动*/ /*-ms-transform:translate(50px);*//*IE9*/ /*-moz-transform:translate(50px);*//*Firefox*/ /*-webkit-transform:translate(50px);*//*Safari和chrome*/ /*-o-transform:translate(50px);*//*Opera*/ /*仅在X轴上移动*/ /*-ms-transform:translateX(50px);*//*IE9*/ /*-moz-transform:translateX(50px);*//*Firefox*/ /*-webkit-transform:translateX(50px);*//*Safari和chrome*/ /*-o-transform:translateX(50px);*//*Opera*/ /*仅在Y轴上移动*/ /*-ms-transform:translateY(50px);*//*IE9*/ /*-moz-transform:translateY(50px);*//*Firefox*/ /*-webkit-transform:translateY(50px);*//*Safari和chrome*/ /*-o-transform:translateY(50px);*//*Opera*/ } 3）效果图如下：
①未移动的效果图：
②在X轴与Y轴上均移动时的效果图：
③设置一个值相当于仅在X轴上移动时的效果图：
④仅在X轴上移动时的效果图：
⑤仅在Y轴上移动时的效果图：
6、对一个元素使用多种变形方法：(同样的方法只能使用一次)
（1）使用方法：
transform:方法1 方法2 方法3 方法4;
-ms-transform:方法1 方法2 方法3 方法4;/*IE9*/
-moz-transform:方法1 方法2 方法3 方法4;/*Firefox*/
-webkit-transform:方法1 方法2 方法3 方法4;/*Safari和chrome*/
-o-transform:方法1 方法2 方法3 方法4;/*Opera*/
（2）对一个元素使用多种变形方法的应用：
1）HTML代码：
2）CSS代码：
.main{ width: 100%; height: 500px; background-color: lightcoral; } .div{ width: 300px; height: 300px; background-color: lightblue; -ms-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*IE9*/ -moz-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Firefox*/ -webkit-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Safari和chrome*/ -o-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Opera*/ } 3）效果图如下：
①未添加方法时的效果图：
②添加了多种方法时的效果图：
7、改变元素基点transform-origin：
（1）可能的值：
| top left | top | right top |
| left | center | right |
| bottom left | bottom | bottom right |
（2）默认情况下transform属性变化的基点是center，但是可以通过transform-origin改变transform属性变化的基点；
（3）改变元素基点transform-origin的应用：
1）HTML代码：
2）CSS代码：
.main{ width: 100%; height: 500px; background-color: lightcoral; margin-left: 140px; margin-top: 180px; } .div{ width: 300px; height: 300px; background-color: lightblue; -ms-transform:rotate(30deg);/*IE9*/ -moz-transform:rotate(30deg);/*Firefox*/ -webkit-transform:rotate(30deg);/*Safari和chrome*/ -o-transform:rotate(30deg);/*Opera*/ transform-origin: center; /*transform-origin: top;*/ /*transform-origin: top left;*/ /*tr
相关内容
- 详解CSS 怪异盒模型和标准盒模型CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css3的动画特效之动画序列（animation） 基于html css实现带搜索图标的搜索框功能 分享8款纯CSS3实现的搜索框功能CSS实现隐藏搜索框功能(动画正反向序列)
- CSS 利用table实现五种常用布局的方法示例CSS display属性的table表格布局CSS table 单行布局示例代码CSS 使用table布局网页是不明智div+css table布局实现代码
- 如何利用css隐藏input的光标示例代码CSS3表单input输入框聚焦动画特效源码 24种CSS3实现input动态输入框特效源码基于CSS3实现4种input元素滑块UI样式特效源码CSS3实现input按钮样式特效源码使用CSS来扩展增强Input Range的示例CSS3实现的input输入框蓝光特效源码CSS实现当鼠标移到input上时鼠标变为不可输入的状态CSS样式去除input和textarea点击选中框CSS为指定的input文本框添加背景在input中右边加上一个图标的css样式
- css3实现多个元素依次显示效果CSS :befor :after 伪元素的巧妙用法详解CSS nth-child与nth-of-type的元素查找方式css判断某元素的子元素个数并分别设置样式的方法CSS 实现元素较宽不能被完全展示时将其隐藏的方法单元素利用css实现多重边框效果示例代码css3之UI元素状态伪类选择器实例演示利用CSS3伪元素实现逐渐发光的方格边框css 获取从第n个开始之后的所有元素
- 利用纯css实现缩略图悬停效果实例代码纯CSS3实现的鼠标悬停文字发光动画特效源码纯CSS3实现鼠标悬停星星评分特效源码纯CSS3制作12种鼠标经过按钮悬停动画效果特效源码纯css3实现的鼠标悬停图片遮罩文字显示动画特效源码纯CSS3制作的鼠标悬停时边框旋转纯css3实现的鼠标悬停放大图片，同时其他图片模糊效果源码纯CSS3实现鼠标悬停卡片翻转切换特效源码纯css3实现的鼠标悬停图标导航动画变换特效源码纯CSS实现鼠标悬停显示图片效果的实例分享纯css3实现的9款鼠标悬停后图片散开动画特效源码
- 浅析CSS里的BFC和IFC的用法10分钟理解CSS BFC原理及其应用浅谈CSS潜藏着的BFCcss布局之BFC模式（block formatting context）CSS布局基础BFC CSS使用BFC规则布局引发外层div包裹内层div的处理方法CSS理解块级格式上下文（BFC）
- CSS定位的教程CSS属性之定位属性（图文详解）css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)CSS position属性和实例应用演示css position定位属性_动力节点Java学院整理 css中的三种基本定位机制CSS的position定位和float浮动详解CSS 定位之position全面了解CSS3定位和浮动详解深入理解CSS定位与层叠
- Flappy Bird闪退及结算时游戏闪退怎么办_手机游戏_游戏攻略_
- 神魔之塔雨神泰芙努特卡牌属性分析_手机游戏_游戏攻略_
点击排行
本栏推荐
