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, #3023