css3_2D转换transform、动画和3D转换

位移translate

格式：
（1）transform: translate(x, y) // x是x轴上移动的位置，y是y轴上移动的位置
（2）只移动x坐标：①transform: translateX(100px) ②transform: translate(100px, 0)
（3）只移动y坐标：①transform: translateY(100px) ②transform: translate(0, 100px)
注意点
（1）优点：不会影响其他盒子的位置。
（2）translate中的百分比单位是相对于自身元素的translate:(50%,50%)
（3）对行内标签没有效果

旋转rotate

语法：transform:rotate(度数)
（1）rotate里面跟度数，单位是deg，比如rotate(45deg)；
（2）角度为正时顺时针旋转，角度为负时逆时针旋转；
（3）默认旋转中心点是元素的中心点。
设置元素转换中心点
语法：transform-origin
（1）可以跟方位名词：默认情况的50%, 50%等价于center, center；还可以设置left, bottom（旋转中心左下角）
（2）可以设置百分比
（3）还可以设置像素

缩放scale

语法
（1）transform: scale(x, y) // x表示宽度缩放倍数，y表示高度缩放倍数
（2）transform: scale(1, 1) // 宽和高都放大了一倍，相当于没有放大，相当于transform: scale(1)
（3）可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

综合案例

同时适用多个转换，其格式为：

transform: translateX() rotate() scale()....

其顺序会影响转换的效果，故当同时有位移和其他属性的时候，要将位移放在最前面

动画

定义
动画是CSS3中具有颠覆性的特征之一，相比于过渡，动画可以实现更多变化、更多控制、连续自动播放等效果。
基本使用
（1）先定义动画
用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
  0% {  // 0%是动画的开始
    transform: translateX(0px);
  }
  100% {  // 100%是动画的结尾
    transform: translateX(1000px);
  }
}

（2）再调用动画

div {
  width: 200px;
  height: 200px;
  animation-name: 动画名称;
  animation-duration: 持续时间; // 单位s或ms
}

（3）动画序列
①0%是动画的开始，100%是动画的结尾，这样的规则称为动画序列

@keyframes 动画名称 {
  from {  
    transform: translateX(0px);
  }
  to {  
    transform: translateX(1000px);
  }
}
等价于
@keyframes 动画名称 {
  0% { 
    transform: translateX(0px);
  }
  100% {
    transform: translateX(1000px);
  }
}

② 可以改变任意多的样式任意多的次数，里面的百分比要是整数且百分比是总的时间的划分。如实现下图效果

@keyframes 动画名称 {
  0% { 
    transform: translate(0, 0);
  };
  25% {
    transform: translate(1000px, 0);
  };
  50% {
    transform: translate(1000px, 500px);
  };
  75% {
    transform: translate(0px, 500px);
  };
  100% {
    transform: translate(0, 0);
  };
}

image.png

（4）动画属性

（5）速度曲线

（6）元素可以添加多个动画，用逗号隔开。

3D转换

3D旋转
（1）定义：指可以让元素在三维平面内沿着x轴、y轴、z轴或自定义轴进行旋转。

transform: rotateX(45deg)  // 沿着x轴正方向旋转45度
transform: rotate3d(x, y, z, deg)  // 沿着自定义轴旋转deg度（了解即可），例transform: rotate3d(1, 0, 0, 45deg)表示沿x轴旋转45度。

（2）左手法则用于元素方向的判断：左手的手拇指指向x轴的正方向，其余手指弯曲的方向就是该元素沿着x轴旋转的方向。

3D呈现transform-style
（1）transform-style: flat; 默认子元素不开启3D立体空间。
（2）transform-style: preserve-3d; 子元素开启立体空间。
（3）代码写在父元素上，但是影响的是子元素。

浏览器私有前缀

-moz-：代表火狐浏览器
-ms-：代表ie浏览器
-webkit-：代表safari、chrome浏览器
-o-：代表Opera私有属性

css3新增

image.png

最后编辑于：2020.11.10 16:35:16