CSS: transform: 2D變形效果
CSS的互動變化能力，愈來愈強。就技術面而言，要學的固來很多，但更重要的核心問在於：這
些技術要如何來使用，可以讓對文本的理解，表現出數位文本的對
話性意義給出特色。(mouseover)
教學影音 click!!
寫作物件的「旋轉」
CSS範例： transform: rotate();
<style>
div.trarota161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
}
div.trarota161223:hover {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-0-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
</style>
寫作物件的「縮放」
CSS範例： scale() /scaleX()/ scaleY();
<style>
div.trasca161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
}
div.trasca161223:hover {
-webkit-transform: scale(0.5, 2);
-moz-transform: scale(0.5, 2);
-0-transform: scale(0.5, 2);
-ms-transform: scale(0.5, 2);
transform: scale(0.5, 2);
}
</style>
寫作物件的「移動」
CSS範例： translate() /translateX()/ translateY();
<style>
.div16122301 {
border: 1px solid darkred;
}
div.tratral161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
background-color: lightgray;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
div.div16122301:hover >div.tratral161223 {
-webkit-transform: translate(200px, 20px);
-moz-transform: translate(200px, 20px);
-0-transform: translate(200px, 20px);
-ms-transform: translate(200px, 20px);
transform: translate(200px, 20px);
}
</style>
教
學影音 click!!
寫作物件的「傾斜」
CSS範例： skew()/ skewX()/ skewY();
<style>
.div16122302 {
border: 1px solid darkred;
}
div.traskew161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
background-color: lightgray;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
div.div16122302:hover >div.traskew161223 {
-webkit-transform: skewX(30deg);
-moz-transform: skewX(30deg);
-0-transform: skewX(30deg);
-ms-transform: skewX(30deg);
transform: skewX(30deg);
}
</style>
說明：
指定x軸，x不動，效果：
y軸往x軸方向以逆時方向傾斜30度的形狀。
指定y軸，y不動，效果：
x軸往Y軸方向以順時方向傾斜30度的形狀。
寫作物件的transform的「原點轉移」
CSS範例： transform-origin: x% y%;
<style>
.div16122303 {
border: 1px solid darkred;
text-align: center;
}
div.div16122303 >img {
margin: 0px;
padding: 0px;
border: none;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
div.div16122303:hover > img:nth-of-type(2) {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-0-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
transform-origin: 0% 100%;
}
</style>
說明：
x軸：left / 0%, center /50%, right /100%;
Y軸: top /0%, center /50%, bottom / 100%;
使用click的 方法
如果想要：click一下，物件可以移動，而不是使用hover功能。這
樣的互動模態之文本形式，可以使用jQuery程式來達成。
我們可以看到簡單的運用jQuery的toggleClass()，再配合使用css trnsition以及transform之語法，就可以創造補間形式的動態效果。
這一作用更直覺，更適合一般人的直覺寫作思考。
我們可以看到簡單的運用jQuery的toggleClass()，再配合使用css trnsition以及transform之語法，就可以創造補間形式的動態效果。
這一作用更直覺，更適合一般人的直覺寫作思考。
CSS:
<style>
.clicsstt170101 {
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
cursor: pointer;
}
.clicsstt170101add01 {
transform: translate(-350px, -140px);
}
</style>
jQuery: click
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
$(this).toggleClass('clicsstt170101add01');
教學影音 click!!
