<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通過2D轉換我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。下面是2D轉換的方法
* transform爲動畫屬性可以爲2D或3D動畫
translate()元素從當前位置移動根據X，Y軸移動
rotate() 旋轉角度 單位度 deg
scale()縮放轉換
skew()元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：
matrix()把所有的屬性放在一起的簡寫 包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。
* */
.dh_2d{
width: 80px;
height: 50px;
margin: 200px auto;
background: #009688;
/*transform: translate(100px,50px);*/
/*transform: rotate(60deg);*/
/*transform: scale(1.5,3);*/
/*transform: skew();*/
/*transform: skew(50deg ,60deg);*/
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
/*3D轉換*/
/*rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉
rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
* */
.dh_3d{
width: 100px;
height: 100px;
border-top: 2px solid red;
border-right:2px solid #006DCC ;
border-bottom:2px solid #002A80 ;
border-left:2px solid #000000 ;
margin: 200px auto;
transform: rotateX(160deg);
}
/*過渡效果*/
/*
CSS3 過渡是元素從一種樣式逐漸改變爲另一種的效果。
要實現這一點，必須規定兩項內容：
規定您希望把效果添加到哪個 CSS 屬性上
規定效果的時長
transition
* */
.dh_gd{
width: 100px;
height: 100px;
border-top: 2px solid red;
border-right:2px solid #006DCC ;
border-bottom:2px solid #002A80 ;
border-left:2px solid #000000 ;
margin: 200px auto;
/*transition: width 2s, height 5s;*/
transition: transform 30s;
}
.dh_gd:hover{
/*width: 200px;
height: 200px;*/
transform: scale(2,2);
}
/*自定義動畫
@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果。
animation
* */
.dh_animation{
width: 50px;
height: 50px;
background: #00FFFF;
animation:mydh 5s infinite ;
}
@keyframes mydh{
0% {width: 50px;height: 50px;background: #00FFFF;}
25% {width: 10px;height: 10px; background: #0088CC;}
50% {width: 100px;height: 100px;background: red;}
75% {width: 80px;height: 80px;background: #1D7DB1;}
100%{width: 50px;height: 50px;background: #00FFFF;}
}
</style>
</head>
<body>
<div class="dh_2d"></div>
<div class="dh_3d"></div>
<!--過渡動畫-->
<div class="dh_gd"></div>
<!--自定義動畫-->
<div class="dh_animation"></div>
</body>
</html>