`

css3变形之缩放 transform:scale

    博客分类:
  • CSS3
 
阅读更多
scale()函数 让元素根据中心原点对对象进行缩放。

语法:
1、scale(X,Y)
使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)。没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放(X轴缩放)
3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)

     scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大
<div class="wrapper">
  <div>我将缩小0.8并且旋转45度</div>
</div>

容器的鼠标滑过时的状态缩小0.8并且旋转45度:
.wrapper {  
  width: 200px;  
  height: 200px;  
  border:2px dashed red;  
  margin: 100px auto;  
}  
.wrapper div {  
  width: 200px;  
  height: 200px;  
  line-height: 200px;  
  background: orange;  
  text-align: center;  
  color: #fff;  
}  
.wrapper div:hover {  
  opacity: .5;  
  -webkit-transform: rotate(45deg) scale(0.8);  
  -moz-transform: rotate(45deg) scale(0.8);  
  transform: rotate(45deg) scale(0.8);  
}  

效果演示:http://jsfiddle.net/5uk7sh3j/
分享到:
评论

相关推荐

    css3 transform过渡抖动问题解决

    transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如: transform: scale(1.2); 换成: transform: scale(1.2) rotate(0.1deg);...clac是css3

    zuoxiaobai#zuo11.com#transform 两个动作怎么写?scale缩小后,依旧占用空间的问题1

    scale缩小后,依旧占用空间的问题","description": "transform对某个元素使用两个及以上变换时,用空格分隔,scale缩小0.5倍后,

    css3的transform中scale缩放详解

    1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5); 2、scaleX() 元素...

    纯css3 transform文字变形3D阴影效果代码

    在本主题中,我们将深入探讨如何使用CSS3的`transform`属性来实现文字的3D变形和阴影效果。`transform`属性允许我们对元素进行旋转、缩放、移动和倾斜等变换,从而创造出丰富的视觉效果。 首先,让我们理解`...

    css div缩放效果

    CSS的`transform`属性允许我们对元素进行二维或三维变换,其中包括缩放。缩放效果通过`scale()`函数来实现。例如,要将`div`元素的宽度和高度都放大两倍,我们可以这样写: ```css .myDiv { transform: scale(2)...

    css3图片变形特效

    首先,CSS3中的`transform`属性是实现图片变形特效的核心。这个属性允许我们对元素进行二维或三维的变换,包括旋转(rotate)、缩放(scale)、平移(translate)和倾斜(skew)。例如,我们可以这样对一个图片元素...

    纯CSS图片流畅缩放显示详情代码,鼠标移到图片上后图片会缩小,同时下方显示产品的文字描述,兼容主流浏览器

    在本示例中,我们关注的是一个利用CSS3实现的图片流畅缩放功能,它在用户将鼠标悬停在图片上时,图片会自动缩小,同时在下方展示与图片相关的产品描述。这个功能在电商网站或者其他需要展示产品详细信息的场景中非常...

    div css3 hover transform属性5种鼠标悬停

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了许多强大的功能,其中transform属性和:hover伪类是两个关键元素,用于创建动态效果和交互性。本篇文章将详细探讨如何结合这两个特性,实现div元素在鼠标悬停时...

    数据可视化大屏自适应,保持比例不变形,满足不同分辨率的需求-利用transform的scale属性缩放,缩放整个页面

    2、利用transform的scale属性缩放,缩放整个页面。。 3、在任意屏幕下保持16:9的比例,保持显示效果一致。 4、更宽:(Width / Height) &gt; 16/9,以高度为基准,去适配宽度。 5、更高:(Width / Height) ,以宽度为...

    1.08 css3-动画

    CSS3 动画中的 2D 转换可以将元素旋转、缩放、移动或倾斜。这些转换可以使用 transform 属性来实现。 1. rotate() 方法 rotate() 方法可以将元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。 语法: ...

    CSS3 transform制作漂亮的照片墙特效

    其中,`transform`属性是CSS3中的一个关键特性,它允许我们对元素进行二维或三维的变形操作,如旋转、缩放、平移和倾斜等。在本案例中,“CSS3 transform制作漂亮的照片墙特效”就是利用了这个属性来创建一个...

    10种纯CSS3 transform鼠标悬停到图片上过渡动画显示

    CSS3的`transform`属性是Web设计领域的一个强大工具,它允许我们对元素进行旋转、缩放、平移和倾斜等操作,从而创造出丰富的动态视觉效果。在"10种纯CSS3 transform鼠标悬停到图片上过渡动画显示"这个主题中,我们将...

    可调节CSS3变形金刚特效.zip

    本主题的焦点是“可调节CSS3变形金刚特效”,它利用了CSS3的高级特性来实现一个动态且交互式的变形效果,让用户能够通过控制参数来调整元素的大小、旋转角度、透明度以及像素细节。以下将详细探讨这个特效所涉及的...

    HTML5+CSS3 transform变形处理.pdf

    HTML5和CSS3的transform属性是现代网页设计中不可或缺的一部分,它允许开发者对网页元素进行丰富的视觉变换,如旋转、缩放、倾斜和移动。在CSS3中,transform功能极大地扩展了网页动态效果的可能性,使得网页设计...

    css3 transform创意的机械Loading加载动画效果

    `transform`属性是CSS3中的核心特性之一,它能够对元素应用2D或3D转换。基本语法如下: ```css transform: function1 | function2 | ...; ``` 其中,`function`可以是以下几种变换函数: 1. `translate(x, y)`: ...

    HTML5+CSS3第三天.xmind

    缩放:scale(默认1,大于1放大,小于1缩小) 3.旋转:rotate(单位deg) 4.倾斜:skew(单位deg) 3D变形transform: 1.rotateX:沿着X轴旋转 2.rotateY:沿着Y轴旋转 3.rotateZ:沿着Z轴旋转 4.backface-visibility:...

    纯CSS3实现的图片放大缩小

    在现代网页设计中,CSS3已经成为了不可或缺的一部分,它提供了许多强大的功能,其中之一就是能够实现图片的放大缩小效果。这个效果不仅可以提升用户的交互体验,还能为网站增添视觉吸引力。本篇我们将深入探讨如何...

    css3鼠标悬停动画效果

    除了缩放效果,CSS3还提供了许多其他可用于鼠标悬停动画的属性,如旋转(`transform: rotate()`),透明度变化(`opacity`),位移(`transform: translate()`)等。比如,我们可以创建一个旋转并改变颜色的动画: `...

    CSS3按钮炫酷动画hover样式

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的可能性,尤其是在创建交互性和视觉吸引力方面。"CSS3按钮炫酷动画hover样式"这个主题正是关于利用CSS3的技术来提升网页按钮在鼠标悬停时的用户体验。...

Global site tag (gtag.js) - Google Analytics