CSS: transform: 2D變形效果

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之語法，就可以創造補間形式的動態效果。
這一作用更直覺，更適合一般人的直覺寫作思考。

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!!