3D转换常见方法

常见方法:

  • transition:1s(过渡的动画效果):从一个人具体的值到另一个过渡的值
  • transform:rotate(300deg) xy 旋转 transform:rotageX(300deg) transform:rotageY(300deg)
  • transform:scale(0.5,2) 缩放x轴,y轴 >1放大 <1缩小
  • transform:translateX(100px) transform:translateY(100px)
  • transform:translate(100px 100px)
  • transition:rotate(300deg) scale(0.5,2) 一边缩放,一边旋转
  • transition:transform 1s 指定对transform 起效果
  • transition:margin 1s 指定对margin 起效果
  • transition: 1s linear 匀速
  • transition: 1s esae-in 匀加速
  • transition: 1s ease-out 匀减速

 

定位

固定定位 fixed 参照物永远是浏览器

绝对定位 absolute 一定要有参照物

辅助属性:left right top bottom z-index

 

显示隐藏:

display:none;

display:block;

 

居中:

上下左右居中 left:0; right:0; top:0; bottom:0; margin:auto;

左右居中 left:0; right:0; margin:auto;

上下居中 top:0; bottom:0; margin:auto;

 

过渡动画

display:none ; diaplay:block; 无动画效果

height:0; overflow:hidden; height:200px; 存在动画效果

 过渡动画 transition:1s

display:none display:block 无动画

height:0;overflow:hidden;transition:1s height:300px;

position:static/relative/absolute/fixed

static 不定位 === none

relative 相对定位 一般作为绝对定位的参照物 在网页当中占据位置

absolute 绝对定位 会飘出文档流 不占位置

fixed 固定定位 会飘出文档流 永远参照浏览器

 

参照物:给绝对定位提供一个坐标

参照物必须是祖先元素

参照物既可以是相对定位,也可以是其他任何定位

 

锚点:页面内的跳转

a href="#id值"

 

透明度

transparent

rgba()

opacity:0-1 filter:alpha(opacity=0-100)

 

display:none/block 无动画 不占位

opacity:0/1 可以支持动画 占位 可以摸到

visibility:hidden/visible 无动画 占位 但是摸不到

 

 

Guess you like

Origin blog.csdn.net/huhuhuja/article/details/110476130