CSS3转换

2D转换  transform 

旋转rotate

-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);

 

移动translate

transform: translate(200px, 100px);

 

缩放scale

transform: scale(.5, .5);

 

扭曲skew

transform: skew(15deg, 15deg);

 

 

 

3D转换  transform 

旋转rotate3d

transform: rotate3d(1, 1, 1, 45deg);

transform: rotateX(45deg);

transform: rotateY(45deg);

transform: rotateZ(45deg);

 

移动translate3d

transform: translate3d(200px, 200px, 200px);

transform: translateX(200px);

transform: translateY(200px);

transform: translateZ(200px);

 

缩放scale3d

transform: scaleX(.5);

transform: scaleY(.5);

transform: scaleZ(.5);

transform: scale3d(.5, .5, .5);

 

 

transform与坐标系统   transform-origin

transform-origin: left top;

transform-origin: left top 0;

transform-origin: 25% top 0;

 

transform-style扩展属性

transform-style: preserve-3d;   立体效果

 

perspective扩展属性

perspective: 500px;     远近效果

perspective-origin: 50% 50%;   观看角度 top bottom center

 

 

backface-visibility扩展属性

backface-visibility: hidden;  背面背向用户时是否可见   visible

 

转载于:https://www.cnblogs.com/jian1234/p/9860086.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值