变形 Transform

概述 Overview: .变形 transform 允许您移动 translate、缩放 scale、旋转 rotate 和倾斜 Skew；综合使用，可以呈现3D效果

.分为2D变形和3D变形，分别有相应的CSS属性

.适用于 block 元素

.可以在不使用定位的情况下，移动元素，且提高层级

.每个变换都可以指定起点 transform-origin ；默认是对象几何中心 - 50% 50% 0

.同时应用多个变换属性时，属性顺序不同，最后结果也不相同；建议先旋转 rotate 再平移 translate

.变换不会引用 reflow 重新布局

.更多变换，请访问 ztext.js

When possible, use transforms and opacity for animation rather than layout properties like "top", "left" or "margin". You'll get smoother animations!

位移 Translate

位移 Translate

更多信息，请访问 MDN - translate

类别	说明
translateX(tx)	X轴位移 - horizontally on the 2D plane
translateY(ty)	Y轴位移 - vertically on the 2D plane
translateZ(tz)	Z轴位移 - along the z-axis in 3D space
translate(tx [, ty])	1个参数，沿x轴；2个参数，分别沿着x轴、y轴 - in the horizontal and/or vertical directions
translate3d(tx, ty, tz)	3D位移 - in 3D space

translateX(tx) = translate(tx, 0) = translate3d(tx, 0, 0)

translateY(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0).

translateZ(tz) is equivalent to translate3d(0, 0, tz)

translate(2px) = translate(2px, 0)

[] 单个子元素居中；更多居中，请访问居中专题

缩放 Scale

缩放 Scale

.缩放不会影响元素尺寸；但是会影响/覆盖到周围其他元素

.缩放因子 factor：值大于1，放大；值小于1，缩小

.也可以取负值；-1可以实现镜像 symmetry

.更多信息，请访问 MDN - scale

类别	说明
scaleX(factor)	X轴缩放 - along the x-axis
scaleY(factor)	Y轴缩放 - along the y-axis
scaleZ(factor)	Z轴缩放 - along the z-axis
scale(factorX[, factorY])	2D平面缩放 - on the 2D plane / only scales in 2D
scale3d(factorX, factorY, factorZ)	3D缩放 - in 3D space

[] 呼吸灯 - Breath

.过渡动画 transition

.缩放 scale

[] 定制头像 - Avatar；更多实现请访问头像 avatar - CodePen

.缩放 scale

.变换起点 transform-origin

.边框 border

.圆角边框 border-radius

[] 线性加载 - Loading、线性加载 Loading - CodePen

.弹性盒子 flex

.帧动画 animation

.内联变量 --var

.滤镜 filter

旋转 Rotate

旋转 Rotate

.单位：度 deg、弧度 rad、圈 turn

.方向：正数为顺时针；负数为逆时针 - If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

.旋转 rotate 会改变默认的方向，后续的位移 translate 都会受影响；建议：先旋转再位移；旋转后再位移，位移是参照旋转后的坐标系 - 如，定位后，Z轴统一朝外

.更多信息，请访问 MDN - rotate

类别	说明
rotateX(angle)	X轴旋转 - around the x-axis
rotateY(angle)	Y轴旋转 - around the y-axis
rotateZ(angle)	Z轴旋转 - around the z-axis
rotate(angle)	2D平面旋转 - on the 2D plane；相当于 rotateZ(angle)
rotate3d(x, y, z, a)	3D旋转 - specified by three numbers and one angle

[] 标签 Label

.旋转 rotate

.位移 translate

.定位 position

.单行居中 line-height

[] 网站 LOGO

.定位 position

.边框 border

.边框圆角 border-radius

.过渡动画 transition

.鼠标悬停 :hover

[] 网站 LOGO

.缩放 scale

.旋转 rotate

.定位 position

.边框圆角 border-radius

.伪元素 ::before ::after

.背景图片 background-image

[] 时钟 - Clock、时钟 - Clock

.正向旋转|反向旋转 rotate

.伪元素 ::after ::before

.父相子绝 relative absolute

.内联变量 --var

.盒阴影 box-shadow

[] 心似莲花 - Lotus

.旋转 rotate

.定位 position

.边框 border

.边框圆角 border-radius

.过渡动画 transition

.伪元素 ::before ::after

[] 奥运五环 - Olympic Rings

.弹性盒子 flex

.负边距 margin

.边框 border

.滤镜 filter 或盒阴影 box-shadow

.内联变量 --var

[] 动态加载 - Loading、动态加载 - CodePen

.定位 position

.弹性盒子 flex

.帧动画 animation

.盒阴影 box-shadow

.文本阴影 text-shadow

.定时器 setInterval

[] 进阶 Loading - CodePen

.定位 position

.缩放 scale

.帧动画 animation

.滤镜 filter

[] 目标导引 - CodePen

.内联变量 --var

.旋转 rotate

.定位 position

.或 transform-origin

[] 饼图 - CodePen

.适合大于50%的饼图；小于50%的需要另外设计

.伪元素 ::before ::after 实现

.旋转：利用圈 turn 实现

[] 表格 fieldset - CodePen

.通过定位和旋转使诺干 fieldset 有机组合

.定位 position

.内联变量 --var

.旋转 rotate

[] 乐透 - Lottery

.定位 position

.旋转 rotate

.伪元素 ::befor

.路径剪切 clip-path

.内联变量 --var

.弹性盒子 flex

倾斜 Skew

倾斜 Skew

.扭曲 distort/倾斜元素

.仅限在2D平面

.单位：度 deg、弧度 rad、圈 turn

类别	说明
skewX(angleX)	X轴倾斜 - in the horizontal direction on the 2D plane
skewY(angleY)	Y轴倾斜 - in the vertical direction on the 2D plane
skew(angleX [, angleY])	1个参数：沿x轴方向；2个参数，分别沿x轴、y轴方向

skewX(a) is equivalent to skew(a)

[] 按钮设计 - Button、个人网站 - 导航、伪3D导航 - CodePen

.定位 Position

.倾斜 skew：也可以使用变换起点 transform-origin调整倾斜参考位置

.伪元素 ::before 或 ::after

.过渡动画 transition：可以操作变换属性/translate；也可以操作定位属性/left

.鼠标悬停 :hover

[] 导航设计 - Nav、导航1 - CodePen、导航2 - CodePen

.导航项目倾斜

.文字内容反向倾斜

.优化：溢出隐藏

.弹性盒子 flex 或网格 grid

其它方案

.使用渐变背景

.第一个和最后一个使用1个切角

.中间2个使用2个切角，注意指定大小和取消重复

.使用负边距拉近导航项目的距离

[] Netflix、Netflix - CodePen

.静态高度为0；左边和右边定位在底部；中间定位在顶部；方便应用高度动画

.变换起点 transform-origin - 中间变换起点调整至顶部

.盒阴影 box-shadow - 中间使用阴影，同时提升层级，覆盖在上面

.帧动画 animation - 高度从0到100%

.为观测方便，整体动画都延迟了1秒

[] Logo制作、Logo 制作 - CodePen

.定位 position

.倾斜 skew

.伪元素 ::before ::after

[] 论文封面 - Cover

.定位 position

.倾斜 skew

.伪元素 ::before ::after

三维变换

<section1> 天空盒 Sky Box

1. axis - 坐标轴；左手定则：大拇指指向轴的正方向，四指弯曲方向即为顺时针方向

Z轴

2. translate - 位移

Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller

近大远小

拖动滑块查看Z轴位移 transform: translateZ( 0px ) [-1000px, +1000px]

3. rotate - 旋转

顺时针为正；逆时针为负

. 拖动滑块查看Y轴旋转 transform: rotateY( 0deg ) [-90deg, +90deg]

<section2> 核心属性 Core Property

.transform 默认是2D变形；要呈现3D效果，必须设置透视/景深及指定为3D变形模式；具体步骤为：

1. 为祖先元素指定景深 perspective (创建一个天空盒 sky box)，单位是px，通常取800px-1200px；景深和视口宽度相差不要太大 - start by configuring the 3D space by giving it a perspective

.super {
    perspective: 1000px;
}

2. 为自己显式的设置3D变形 transform-style: preserve-3d( flat 表示2D) - then you have to configure how your 2D elements will behave in that space

.self {
    transform-style: preserve-3d;
}

这两个属性会影响元素的固定定位

<section3> 实操 Coding

[] 卡片翻转 - Card、Card flip - CodePen、CSS3D图片翻转效果

.使用普通元素或者 ::before ::after 展示图片或文字

.通过定位使得它们重叠在一起

.其中一张翻转180deg

.使用 backface-visibility 隐藏背面

.移动鼠标到图像上(桌面端)或单击图像(移动端)查看效果

[] 魔方 - Cube、乐透 - Lottery、魔方 Cube - CodePen、魔方旋转 - CodePen

.移动鼠标到图像上(桌面端)或单击图像(移动端)查看效果

.相对定位 relative、绝对 absolute

.图片 <img>或背景图片 background-image

.帧动画 animation 或过渡动画 transition

.盒阴影 box-shadow

[] 3D画廊 - 文字版、3D画廊 - 图片版、3D画廊

.使用文字时，注意显示的方向 - 在反转 180deg 的基础上，再旋转一定角度，最后反向位移，成圆分布

transform: rotateY(calc(180deg + var(--rot) * 60deg)) translateZ(calc(-1*var(--z)));

.位移的长度同景深，故一部分在用户视线前方，一部分在用户视线后方

.CSS变量的使用

.匹配移动端

:root {
  --z: 1000px;
  --ar: 16/9;
}
@media screen and (max-width: 768px) {
  :root {
    --z: 400px;
    --ar: 9/16;
  }
}

[] DNA

.帧动画 animation

.伪元素 ::before 或 ::after

.内联变量 --var

[] 翻书、简历

.利用内联变量方便设置元素倾斜角度

.3D空间的营造：book-wrap 指定景深；book 指定3D变换

.打开和闭合的延迟效果

[] 视觉差 - 借助第三方库 vanilla-tilt，单击本地下载

VanillaTilt.init(document.querySelector(".van-box"), {
    max: 50,
    speed: 400
});

<section4> 注意事项 tips

.父元素不能指定 overflow:hidden；否则就还原为2D模式

.如果为更高级的父元素指定景深 perspective，则其下面子元素都应指定3D变换模式，即：这些元素可以共享一个景深/天空盒(sky box)

.backface-visibility可以隐藏元素背面，和3D并没有直接关系

.更多信息，请访问 MDN - 3D specific CSS properties、发牌、科技环 - CodePen

<section5> 课后练习 Homework

定制LOGO

卡片翻转

3D魔方

根据个人网站设计，进行扩充完善

拓展阅读：查阅CSS3有关 transform 的其他属性和应用