【CSS 学习】transform 属性详解

transform 属性的值

• translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z) 定义位置的移动距离

• scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz) 定义元素的缩放比例

• rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle) 定义元素的旋转度

• skew(x-angle,y-angle)、skewX(angle)、skewY(angle) 定义元素的倾斜度

3D效果认知

perspective 属性

  该属性用于激活一个3D空间，其子元素都会获得透明效果，一般 perspective 属性用于父元素。

• 取值为 none 或 不设置，则为不激活3D空间
• 取值越小，3D效果越明显，建议取值为元素的宽度

transform-origin 属性

  用来改变元素原点的位置，取值：

• center 默认值 等价于（ center center / 50% 50%）
• top/right/bottom/left
• transform-origin : x y z

使用 transform 实现 3D 立方体 预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transform 实现 3D 立方体</title>
    <style>
        *{ margin: 0 auto; padding: 0; }
        html{
            cursor: pointer;
            background: #3023ae;
            background: -moz-linear-gradient(-45deg, #3023ae 0%, #c86dd7 100%);
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3023ae), color-stop(100%,#c86dd7));
            background: -webkit-linear-gradient(-45deg, #3023ae 0%,#c86dd7 100%);
            background: -o-linear-gradient(-45deg, #3023ae 0%,#c86dd7