css3变形

这次依旧任性,依旧粗鲁的介绍变形,说一些基本的,我们最多用到的变形。也是看完后的一个笔记总结。

变形长这个样子:transform: 

                                transform-origin: 这个是用来定义元素的中心位置,以后的一切关于变形的方式都是以这个中心为准则。当然也有关键字如top left right bottom,也可以用特定的值来定位。 (eg: transform-origin:left bottom -50px)

                                transform-style: flat(default) / preserve-3d 所有的变形是基于2D空间还是3D空间,默认情况下是基于2D空间下处理形式。

                                perspective: 设定查看者的位置,视觉pos,用户和元素3D空间Z平面的距离。两种使用方式:perspective()函数和perspective属性,函数用在变形元素本身上,属性用在变形舞台上,即变形元素的父元素上。

                                perspective-origin: 视觉的角度  关键字top left right bottom 

                                backface-visibility: hidden | visible  很好理解 是否显示变形的背景,尤其在旋转的时候可以显现作用,或者制作一个立方体 透明或实体

                                translateX|Y|Z :位移

                                scale:变形

                                rotate:旋转

                                skew:倾斜


标红的比较实用在h5中实现一些效果,其他的一些变形基本都很简单好理解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值