*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2016年12月23日 星期五

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





沒有留言:

張貼留言