CSS Transforms 旋轉

/* 參數使用方式 */
transform: translate(120px, 50%);
transform: rotate(0.5turn);
transform: scale(2, 0.5);
transform: skew(30deg, 20deg);
transform: matrix(1, 2, 3, 4, 5, 6);

transform: scale(0.5) translate(-100%, -100%);

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit; /* 繼承 */
transform: initial;  /* 初始 */
transform: unset; /* 未設置 */

2D Transforms 屬性

位移	translate()	位移
	rotate()	旋轉
縮放	scale()	縮放
	scaleX()	X橫向縮放
	scaleY()	X垂直縮放
傾斜	skew()	傾斜
	skewX()	X軸傾斜
	skewY()	Y軸傾斜
矩陣	matrix()	設定6種變形函式 matrix(n,n,n,n,n,n)
原點	transform-origin(x,y)	X與Y設定原點位置 (top、center、bottom、left、right)

2D Transforms 範例

translate 位移

單位 px、em、in、%，數值()右下，數值(-)左上

translate(x,y)
translateX(n)
translateY(n)

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  -webkit-transform: translate(50px,100px); /* Safari prior 9.0 */
  transform: translate(50px,100px); /* Standard syntax */
}

rotate 旋轉

旋轉順時針(deg)與逆時針(-deg)
rotate(angle)

/*順時針*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari prior 9.0 */
  transform: rotate(20deg); /* Standard syntax */
}

/*逆時針*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: rotate(-20deg); /* IE 9 */
  -webkit-transform: rotate(-20deg); /* Safari prior 9.0 */
  transform: rotate(-20deg); /* Standard syntax */
}

scale 縮放

數值1正常比例，>1放大，<1縮小。
scale(x,y)
scaleX(n)
scaleY(n)

/*scale()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(2,3); /* IE 9 */
  -webkit-transform: scale(2,3); /* Safari prior 9.0 */
  transform: scale(2,3); /* Standard syntax */
}

/*scaleX()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleX(2); /* IE 9 */
  -webkit-transform: scaleX(2); /* Safari prior 9.0 */
  transform: scaleX(2); /* Standard syntax */
}

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleX(0.5); /* IE 9 */
  -webkit-transform: scaleX(0.5); /* Safari prior 9.0 */
  transform: scaleX(0.5); /* Standard syntax */
}

/*scaleY()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleY(3); /* IE 9 */
  -webkit-transform: scaleY(3); /* Safari prior 9.0 */
  transform: scaleY(3); /* Standard syntax */
}

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleY(0.5); /* IE 9 */
  -webkit-transform: scaleY(0.5); /* Safari prior 9.0 */
  transform: scaleY(0.5); /* Standard syntax */
}

skew 傾斜

X橫向傾斜，數值X()向左，數值X(-)向右
Y垂直傾斜，數值Y()向下，數值Y(-)向上

skew(x-angle,y-angle)
skewX(angle)
skewY(angle)

/*skew()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: skew(20deg,10deg); /* IE 9 */
  -webkit-transform: skew(20deg,10deg); /* Safari prior 9.0 */
  transform: skew(20deg,10deg); /* Standard syntax */
}

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: skew(20deg); /* IE 9 */
  -webkit-transform: skew(20deg); /* Safari prior 9.0 */
  transform: skew(20deg); /* Standard syntax */
}

/*scaleX()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: skewX(30deg); /* IE 9 */
  -webkit-transform: skewX(30deg); /* Safari prior 9.0 */
  transform: skewX(30deg); /* Standard syntax */
}

/*scaleY()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: skewY(20deg); /* IE 9 */
  -webkit-transform: skewY(20deg); /* Safari prior 9.0 */
  transform: skewY(20deg); /* Standard syntax */
}

matrix 矩陣

設定6種變形函式
matrix (scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari prior 9.0 */
  transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
  -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari prior 9.0 */
  transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}

transform-origin 變形原點

變形原點，X與Y設定原點位置(x,y) = top、center、bottom、left、right
top/center/bottom (top = 0%, bottom=100%)
left/center/right (left = 0%, right = 100%)

可與其他屬性配合，組合語法
transform: rotate(45deg) translateX(200px);

/*以左上原點為中心旋轉*/
.box1 {
  background: #2db34a;
  border-radius: 6px;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  color: white;
  font-size: 11px;
  transform-origin: left top;
  transition: 1s ease-in-out;
}

.box1:hover {
  transform: rotate(-270deg);
}

/*以右下原點為中心縮放*/
.box2{
  background: #2db34a;
  border-radius: 6px;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  color: white;
  font-size: 11px;
  transform-origin: bottom right;
  transition: 1s ease-in-out;
}

.box2:hover {
  transform: scale(2);
}

/*以右上原點為中心持續旋轉*/
.box3 {
  background: #2db34a;
  border-radius: 6px;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  color: white;
  font-size: 11px;
  transform-origin: 20px 30px;
  transition: 1s ease-in-out;
}

.box3:hover {
  transform: rotate(900deg);
}

3D Transforms 屬性

與 2D Transforms 屬性差不多

/* 參數使用方式 */
/*rotateX()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -webkit-transform: rotateX(150deg); /* Safari prior 9.0 */
  transform: rotateX(150deg); /* Standard syntax */
}

/*rotateY()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -webkit-transform: rotateY(150deg); /* Safari prior 9.0 */
  transform: rotateY(150deg); /* Standard syntax */
}

/*rotateZ()*/
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -webkit-transform: rotateZ(90deg); /* Safari prior 9.0 */
  transform: rotateZ(90deg); /* Standard syntax */
}

位移	translate3d(x,y,z)
	translateX(x)
	translateY(y)
	translateZ(z)
旋轉	rotate3d(x,y,z,angle)
	rotateX()
	rotateY()
	rotateZ()
縮放	scale3d(x,y,z)
	scaleX(x)
	scaleY(y)
	scaleZ(z)
矩陣	matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
透視	perspective(px)
	perspective-origin(x,y)

3D Transforms 範例

perspective 透視

2種定義方式 :
perspective: 500px;
transform: perspective(250px);

可與其他屬性配合，組合語法

/*透視+位移*/
.box1 {
  background: #2db34a;
  border-radius: 6px;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  color: white;
  font-size: 11px;
 
  transform: perspective(250px)  translateZ(-50px);
}

.box2{
  background: #2db34a;
  border-radius: 6px;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  color: white;
  font-size: 11px;
  
  transform: perspective(250px)  translateZ(50px);
}

/*透視+旋轉*/
.box1 {
  background: #2db34a;
  border-radius: 6px;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  color: white;
  font-size: 11px;
  
  transform: perspective(250px) rotateX(45deg);
}

.box2{
  background: #2db34a;
  border-radius: 6px;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  color: white;
  font-size: 11px;
  
 transform: perspective(250px) rotateY(45deg);
}

.box3 {
  background: #2db34a;
  border-radius: 6px;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  color: white;
  font-size: 11px;
  
  transform: perspective(250px) rotateZ(45deg);
}

perspective-origin 透視原點

透視原點或消失點(vanishing point)，X與Y與Z設定原點位置(x,y,z) = top、center、bottom、left、right

perspective-origin ＋ perspective = perspective matrix 透視矩陣

<!--html範例 - cube建構-->
<div class="scene">
  <div  class="cube">
    <div class="front">前</div>
    <div class="back">後</div>
    <div class="top">上</div>
    <div class="bottom">下</div>
    <div class="left">左</div>
    <div class="right">右</div>
  </div>
</div>

/*css範例 - cube中心點(50%)與向上偏移150px + Y軸旋轉動畫*/
@keyframes cube-rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.scene {
  width: 200px;
  height: 200px;
  margin: 50px 0 0 50px;
  
  perspective: 1000px;
  perspective-origin: 50% -150px;
}

.cube {
  transform-style: preserve-3d;
  animation: cube-rotate 10s infinite ease;
}

.cube div {
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  font-size: 40px;
  color: white;
  text-align: center;
  backface-visibility: visible;
}

.front {
  background: rgba(0, 0, 0, 0.4);
  transform: translateZ(100px);
}

.back {
  background: rgba(0, 255, 0, 1);
  transform: rotateY(180deg) translateZ(100px);
}

.top {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(100px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(100px);
}

.right {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateY(90deg) translateZ(100px);
}