【CSS3】transfrom 的使用

CSS3 transfrom:

  • 浏览器坐标系
  • transfrom 的特点
  • transfrom 的属性值
    • 平移 translate
    • 旋转 rotate
    • 缩放 scale
    • 倾斜 skew
  • transfrom 复合写法注意事项
  • transform-origin
  • position: relative & transfrom
  • 3D效果的实现
    • perspective
    • perspective-origin
    • transform-style
        • eg:画一个立方体

浏览器坐标系

  • x 轴:左 → 右
  • y 轴:上 → 下
  • z 轴:里 → 外

transfrom 的特点

  • 不会脱离文档流,即不会影响页面的布局
  • 可以优化动画的性能
  • 默认以元素自身的中心位置为原点

transfrom 的属性值

transfrom 应用于元素的 2D / 3D 转换。这个属性允许你将元素旋转,缩放,移动,倾斜等

平移 translate

  • translate(x, y) / (x):x、y 分别控制元素在 x、y 轴上的平移
  • translateY():在 Y 轴上平移
  • translateX():在 X 轴上平移
  • translateZ():在 Z 轴上平移
  • 单位:px、% (相对于自己而言)

旋转 rotate

  • rotate() / rotateZ() → Z 轴
  • rotateX() → X 轴
  • rotateY() → Y 轴
  • 单位:deg (度数)

缩放 scale

  • scale(x, y) / (x & y):x、y 分别控制元素宽度、高度的倍数
    • 小于 1 缩小;大于 1 放大 (元素里面的内容也会跟着变化)
    • 负数-镜像倒置,相当于绕 Z 轴旋转了180度

倾斜 skew

  • skew(x, y) / (x):x、y 分别控制元素绕 x、y 轴翻转的度数
  • skewX()
  • skewY()
  • 单位:deg

transfrom 复合写法注意事项

  • 元素的 X、Y 轴的方向是根据元素确定的,所以旋转后 x、y 轴的方向会改变
  • 渲染顺序符合队列 → 即先写先生效,后写后生效
  • eg:transform: rotate(30deg) rotateX(30deg) rotateY(30deg);

transform-origin

  • 用于设置原点的位置,能影响元素的旋转、缩放、倾斜

  • 该属性必须和 transform 属性一起使用

transform-origin: 0 0; /* 设置圆心位置 */
transform-origin: center;
  • x y:设置原点所在的 x、y 轴的位置(单位:px、%
  • leftrightbottomtopcenter 中的 1~2 个
    • left top0% 0% → 元素的左上角
    • right bottom100% 100% → 元素的右下角
  • 默认是 center50% 50% → 元素的中间

position: relative & transfrom

  • 相同点:都不会脱离文档,即不会影响页面的布局
  • 差别:transform 可以优化动画的性能

position 会引起网页的重排,transform 只会引起网页的重绘

3D效果的实现

perspective

  • 即视距,也叫景深;就是我们离显示器的距离,数值越大,离我们越远
  • 给父级标签设置景深,这时这个父级元素叫做 “舞台元素”,我们相当于站到父级元素上看他的子元素,会有 “近大远小” 的视觉效果
  • 默认值是 none,即没有 3D 视觉效果
  • 如果他的子元素也设置了 perspective,视觉效果会叠加

perspective-origin

  • 定义 3D 元素所基于的 X 轴和 Y 轴
  • 当为元素定义 perspective-origin 属性时,其子元素会获得透视效果
  • 注意:使用此属性必须先使用 perspective 属性,而且只影响 3D 转换元素

transform-style

  • 给父级元素设置 transform-style: preserve-3d; 表示将子元素呈现在三维空间中,这时该元素叫 “容器
  • 默认值是 flat,表示将子元素呈现在二维空间中
  • 注意:使用此属性必须先使用 transform 属性
eg:画一个立方体
  1. 设置 perspective,设置景深
  2. 设置 transform-style,进行 3D 填充
  3. 设置 transform,绘制正方体
  4. 设置 animation,设置动画效果
DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index2.css">
    <title>Documenttitle>
head>

<body>
    <ul>
        <li class="front">li>
        <li class="rear">li>
        <li class="left">li>
        <li class="right">li>
        <li class="up">li>
        <li class="down">li>
    ul>
body>

html>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* 舞台元素 */
body {
    /* 设置景深 */
    perspective: 1000px;
}

/* 容器 */
ul {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    animation: rotate 10s infinite linear;
    /* 进行3d填充 */
    transform-style: preserve-3d;
}

/* 制作动画效果 */
@keyframes rotate {
    to {
        transform: rotateX(360deg) rotateY(360deg) rotate(360deg);
    }
}

ul li {
    line-height: 200px;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #000;
    background-color: rgba(70, 187, 152, .5);
}

ul li.front {
    transform: translateZ(100px);
}

ul li.rear {
    transform: translateZ(-100px);
}

ul li.left {
    transform: translate(-50%) rotateY(-90deg);
}

ul li.right {
    transform: translate(50%) rotateY(90deg);
}

ul li.up {
    transform: translateY(-50%) rotateX(90deg);
}

ul li.down {
    transform: translateY(50%) rotateX(90deg);
}

你可能感兴趣的:(CSS,笔记,css3)