- 2D
translate()
rotate()
scale()
skew()
matrix()

참고: http://www.css3files.com/transform/

-moz-transform: scale(2, 1.5);
-webkit-transform: scale(2, 1.5);
-ms-transform: scale(2, 1.5);
transform: scale(2, 1.5);

-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
/*transform-origin Defult : 50% 50%;*/

참고: http://eleqtriq.com/wp-content/static/demos/2010/css3d/matrix2dExplorer.html


- 3D

transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
-moz-transform: rotateX(120deg); /* Firefox */

transform: rotateY(120deg);
-webkit-transform: rotateY(120deg); /* Safari and Chrome */
-moz-transform: rotateY(120deg); /* Firefox */

참고: http://www.clicktorelease.com/code/css3dclouds/

Text-shadow
text-shadow:5px 5px 0 #ccc;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#cccccc, Positive=true);
display:inline-block; zoom:1;

text-wrap
word-wrap:break-word;/*강제줄바꿈*/

text-overflow
overflow:hidden; /*넘치는영역제한*/
text-overflow:ellipsis;
white-space:nowrap; /*줄바꿈 금지*/

참고: http://www.w3schools.com

border-radius
div {
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

box-shadow
div {
box-shadow: 10px 10px 5px #888888 inset; /*X좌표, Y좌표, blur값, 그림자색; */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#888888, direction=135, strength=20);
}

border-image
div {
border:30px solid;
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

 

1. ul의 높이 조절
- 높이값이 고정되어 있을때,

/* .dep2가 초기화면에 보이지 않았다가 target이 되면 높이값을 각기 다르게 설정 (transition설정)  */
.dep2{
 height:0; overflow:hidden;
 /* 나타나는 효과 : 속성명, 시간*/
 transition: height .5s;
 -moz-transition: height .5s; /* Firefox 4 */
 -webkit-transition: height .5s; /* Safari and Chrome */
 -o-transition: height .5s; /* Opera */
}
#product1:target .dep2{height:152px;}


2. li의 높이 조절

/* .dep2가 초기화면에 보이지 않았다가 target이 되면 높이값을 각기 다르게 설정 (transition설정)  */
.dep2 li{
 height:0; overflow:hidden; margin-top: -1px;
 /* 나타나는 효과 */
 transition: height .5s;
 -moz-transition: height .5s; /* Firefox 4 */
 -webkit-transition: height .5s; /* Safari and Chrome */
 -o-transition: height .5s; /* Opera */
}
.product:target .dep2 li{height:38px;}





- 스크립트 없이 css만으로 조절할때
- ie지원안함,
- toggle기능 지원안됨

border-style: solid;
border-width: 20px 22px;
-moz-border-image: url(btn_login.gif) 20 22 round stretch;
-webkit-border-image: url(btn_login.gif) 20 22 round stretch;
-o-border-image: url(btn_login.gif) 20 22 round stretch;
border-image: url(btn_login.gif) 20 22 round stretch;


http://border-image.com