海浪Code

Appearance

变形 - transform ​

变形就是指通过 CSS 改变元素的位置或性质，变形不会影响到页面的布局。

多个变形需写在一行里面。

transform 的可选值

  • translateX()：在 X 轴平移（百分比单位相对于自身）
  • translateY()
  • translateZ()：正常情况下，是元素和人眼之间的距离。默认情况下网页是不支持透视的。如果需要看见这个效果，必须要设置一个视距。发生旋转后再平移方向是会变的。

通过transform实现宽度不确定的元素的居中 ​

css
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

移出效果示例 ​

和margin 不同的是，变形不会影响别的元素

css
.box:hover{
transition: all .6s;
transform: translateY(-10px);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

视距 - perspective ​

设置当前网页的视距，设置在 html 极有可能不生效。

一般设置给body

css
transform: perspective(800px) translateZ(100px) translateY(-10px);

旋转 ​

transform: perspective(800px) rotateX(70deg)：X轴旋转

rotateY(180deg)：Y轴旋转

rotateZ(180deg)：Z轴旋转

缩放 ​

缩放时是缩放的元素的轴

  • scaleX：X轴缩放，个人数放大，小数缩小
  • scaleY：Y轴缩放
  • scale：双方向

变形的原点 ​

指定开始变形的原点：默认是中间开始

transform-origin

css
transform-origin: 20px 20px;

背面显示 ​

backface-visibility：设置是否显示元素的背面

可选值：visible（默认值），hidden（隐藏）