簡單的2d, 3d基礎屬性
- 移動
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>css代碼：
<style>
li{
list-style: none;
width: 160px;
height: 240px;
background-color: saddlebrown;
margin-right: 20px;
float: left;
transition: transform 1s;
}
li:hover{
transform: translate(0,20px);
width: 180px;
height: 260px;
}
</style>重點： transition屬性以及transform屬性值的運用！移動的屬性值爲 translate(x軸的像素,y軸的像素);
- 縮放
縮放函數 scale() 讓元素根據中心原點對對象進行縮放，默認值爲1
縮小：0.01~0.99
增大：大於1.01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale()函數</title>
<style type="text/css">
div{
width: 500px;
height: 500px;
margin: 30px auto;
position: relative;
background: url(img/timg (1).jpg) no-repeat center center;
background-size: 100% 100%;
}
div img{
position: absolute;
top: 50%;
left: 50%;
margin-left: -35px;
margin-top: -50px;
}
div img:nth-child(1){
opacity: 0.8;
z-index: 2;
border: 1px solid red;
}
div img:nth-child(2){
z-index: 1;
transform: scale(1.5);
}
</style>
</head>
<body>
<div>
<img src="img/timg%20(1).jpg" alt=" " style="width: 400px;height: 200px;" />
<img src="img/timg%20(3).jpg" alt=" " style="width: 400px;height: 200px;" />
</div>
</body>
</html>代碼運行如下：
- 旋轉
旋轉既就是 transform 屬性的屬性值變爲 rotate(旋轉度); 例如45度的表達爲 45deg;
代碼如下：
<style>
li{
list-style: none;
width: 160px;
height: 240px;
background-color: saddlebrown;
margin-right: 20px;
float: left;
transition: transform 1s,width 1s,height 1s;
}
li:hover{
transform: rotate(45deg);
width: 180px;
height: 260px;
}
</style>還有一個函數skew()的作用是： 傾斜
還有
<style>
li{
list-style: none;
width: 160px;
height: 240px;
background-color: saddlebrown;
margin-right: 20px;
float: left;
transition: transform 1s;
}
li:hover{
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>以上是變換矩陣matrix()，運用比較多。- 自定義動畫
認識一個新屬性： @keyframes 自定義名字（例如myself){}；
然後再再其中添加 from{}【開頭】 和 to{}【結尾】.
代碼如下：
@keyframes myself {
from{
background-color: #b60;
}
to{
background-color: #fff;
}
}
li:hover{
animation: myself 1s;
}剛纔講訴的自定義動畫，只有開頭(from) 和 結尾(to) 的變化。但其實也可以把這個變化的過程分的更加詳細，注重於變化的過程。下面演示一串代碼：
@keyframes myself {
0%{
background-color: #b60;
}
25%{
background-color: #160;
}
75%{
background-color: #1c3;
}
100%{
background-color: #fff;
transform: translate(500px,100px);
}
}
li:hover{
animation: myself 3s;
}其實還可以分得更加詳細，全看個人意願。
- Jquery 控制動畫
運用javascript 來實現點擊發生變化：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://www.51rgb.com/js/jquery.js"></script>
<style>
li{
list-style: none;
width: 160px;
height: 240px;
background-color: saddlebrown;
margin-right: 20px;
float: left;
transition: transform 1s;
}
@keyframes myself {
0%{
background-color: #b60;
}
25%{
background-color: #160;
}
75%{
background-color: #1c3;
}
100%{
background-color: #fff;
transform: translate(500px,100px);
}
}
.donghua{
animation: myself 3s;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
${function(){
${"li"}.click(function () {
var $x=$(this);
var $y=$x.index();
$x.addClass("donghua");
})
}
｝
</script>
</div>
</body>
</html>但至今我還沒有運行成功，先將代碼放在這裏。等我運行出來再進行糾正。而且上面的代碼只能點擊一次。然後動畫效果便沒有了。接下來演示一段可以重複點擊實現動畫的效果。（以上錯誤純屬代碼運用錯誤，陰影部分既就是代碼錯誤地方，一下爲改正代碼：
<script>
$(function(){
$("li").click(function() {
var $x = $(this);
/*var $y = $x.index();*/
$x.addClass("donghua");
})
})
</script>接下來粘貼多次點擊代碼：
<script>
$(function(){
$("li").click(function() {
var $x = $(this);
/*var $y = $x.index();*/
$x.addClass("donghua");
setTimeout(function () {
$x.removeClass("donghua")
},3600)
})
})
</script>其實也就是<sctript></script>加了循環。
除此之外，還有另外一種寫法：
<script>
$(function(){
$("li").click(function() {
var $x = $(this);
var $y = $x.index();
$("li").eq($y).addClass("donghua");
setTimeout(function () {
$("li").eq($y).removeClass("donghua")
},3600)
})
})
</script>前面講的都是關於2D的一系列的特性，接下來講訴3D的一些性質：
1.位移
3d中的屬性添加：translateZ() 以及 translate3d();
translate3d();也就是 translateX(), translateY(), translateZ()的結合體，
translateZ(); 也就相當於 translate(0, 0 ,Z);
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Translate3d()</title>
<style type="text/css">
.stage{
width: 300px;
height: 300px;
float: left;
margin: 15px;
position: relative;
background: url(img/timg (1).jpg) no-repeat center center;
background-size: 100% 100%;
perspective: 1200px;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
.container img{
position: absolute;
margin-left: -35px;
margin-top: -50px;
}//水平垂直居中
.container img:nth-child(1){
z-index: 1;//層疊級別
opacity: .6;//透明度
}
.s1 img:nth-child(2){
z-index: 2;
transform: translate3d(0, 0, 200px);
/*transform: translateZ(200px);*/
}
.s2 img:nth-child(2)
{
z-index: 2;
transform: translate3d(0, 0,-200px);
/*transform: translateZ(-200px);*/
}
</style>
</head>
<body>
<div class="stage s1">
<div class="container">
<img src="img/timg%20(1).jpg" alt=" " style="width: 400px; height: 200px;">
<img src="img/timg%20(3).jpg" alt=" " style="width: 400px; height: 200px;">
</div>
</div>
<div class="stage s2">
<div class="container">
<img src="img/timg%20(1).jpg" alt=" " style="width:140px; height: 200px;">
<img src="img/timg%20(3).jpg" alt=" " style="width:140px;; height: 200px;">
</div>
</div>
</body>
</html>2.縮放
3d中的屬性添加：scaleZ() 以及 scale3d();
scale3d();也就是 scaleX(), scaleY(), scaleZ()的結合體，
scaleZ(); 也就相當於 scale(0, 0 ,Z);
代碼如下：
.s1 img:nth-child(2){
z-index: 2;
/*transform: translate3d(30px, 30px, 200px);*/
/*transform: translateZ(200px);*/
transform: scaleZ(5) rotateX(45deg);//大於1.01 增大
}
.s2 img:nth-child(2)
{
z-index: 2;
/*transform: translate3d(30px, 30px,-200px);*/
/*transform: translateZ(-200px);*/
transform: scaleZ(.25) rotateX(45deg);//大於0.01 小於0.99
}3.旋轉
3d中的屬性添加：rotateZ() 以及 rotate3d();
rotate3d();也就是 rotateX(), rotateY(), rotateZ()的結合體，
rotateZ(); 也就相當於rotate(0, 0 ,Z);
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 3D 旋轉</title>
<style type="text/css">
.stage{
width: 300px;
height: 300px;
float: left;
margin: 15px;
position: relative;
background: url("img/test.jpg") no-repeat center center;
background-size: 100% 100%;
perspective: 1200px;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: preserve-3d;
}
.container img{
position: absolute;
margin-top: -100px;
margin-left: -70px;
}
.container:nth-child(1){
z-index: 1;
opacity: .6;
}
.s1 img:nth-child(2){
z-index: 2;
transform: rotateX(45deg);
}
.s2 img:nth-child(2){
z-index: 2;
transform: rotateY(45deg);
}
.s3 img:nth-child(2){
z-index: 2;
transform: rotateZ(45deg);
}
.s4 img:nth-child(2){
z-index: 2;
transform: rotate3d(.6, 1, .6, 45deg);
}
</style>
</head>
<body>
<div class="stage s1">
<div class="container">
<img src="img/timg%20(1).jpg" alt=" " style="width:140px; height: 200px;">
<img src="img/timg%20(3).jpg" alt=" " style="width:140px; height: 200px;">
</div>
</div>
<div class="stage s2">
<div class="container">
<img src="img/timg%20(1).jpg" alt=" " style="width:140px; height: 200px;">
<img src="img/timg%20(3).jpg" alt=" " style="width:140px;; height: 200px;">
</div>
</div>
<div class="stage s3">
<div class="container">
<img src="img/timg%20(1).jpg" alt=" " style="width:140px; height: 200px;">
<img src="img/timg%20(3).jpg" alt=" " style="width:140px; height: 200px;">
</div>
</div>
<div class="stage s4">
<div class="container">
<img src="img/timg%20(1).jpg" alt=" " style="width:140px; height: 200px;">
<img src="img/timg%20(3).jpg" alt=" " style="width:140px; height: 200px;">
</div>
</div>
</body>
</html>注意：由於作者是新手小白，寫的很簡略，不易看懂，而且特別基礎。讀者慎入！！