|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>transfrom</title>
|
|
|
<style>
|
|
|
.transform {
|
|
|
transform: translate(30px, 50px);
|
|
|
transform: rotate(20deg);
|
|
|
transform: scale(2, 1);
|
|
|
transform: matrix(12);
|
|
|
transform: matrix(1.5, 0.5, -0.5, 1.2, 50px, 20px);
|
|
|
}
|
|
|
|
|
|
.transforms3d {
|
|
|
transform-origin: 10% 50%;
|
|
|
}
|
|
|
|
|
|
.prespective {
|
|
|
perspective: 200px;
|
|
|
position: relative;
|
|
|
width: 200px;
|
|
|
height: 150px;
|
|
|
background-color: rebeccapurple;
|
|
|
margin: 40px;
|
|
|
}
|
|
|
|
|
|
.test {
|
|
|
position: absolute;
|
|
|
width: 70px;
|
|
|
height: 70px;
|
|
|
background-color: yellow;
|
|
|
transform-style: preserve-3d;
|
|
|
transform: rotateX(45deg);
|
|
|
perspective-origin: bottom left;
|
|
|
}
|
|
|
|
|
|
.test2,
|
|
|
.test3 {
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
background-color: blue;
|
|
|
color: #fff;
|
|
|
transform: rotateY(180deg);
|
|
|
}
|
|
|
|
|
|
.test2 {
|
|
|
backface-visibility: hidden;
|
|
|
}
|
|
|
|
|
|
.test3 {
|
|
|
backface-visibility: visible;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<!--
|
|
|
برای تغییر خالت یا تغییر وضعیت عناصر در صفخات وب استفاده میشود
|
|
|
translate(X,Y) جابجایی در جهت محور ها
|
|
|
rotate(X,Y,Z);
|
|
|
rotateX();
|
|
|
rotateY();
|
|
|
rotateZ();
|
|
|
scale(x,y);
|
|
|
skew()به معنی انخراف یا کجی است
|
|
|
skew(10deg);
|
|
|
skewY(10deg);
|
|
|
skewX(10deg);
|
|
|
matrix(a,b,c,d,e,f):
|
|
|
a: scaling factor in horizontal direction,
|
|
|
b: skewing factor in horizontal dirextion ,
|
|
|
c: skewing factor in vertical direction,
|
|
|
d: scaling factor in vertical direction,
|
|
|
e: horizontal translation ,
|
|
|
f: vertical translateion,
|
|
|
|
|
|
---3d transforms---
|
|
|
|
|
|
transform-origin: 30px 50px it defines the point which the transformation takes place,
|
|
|
by default the transformation origing is set at the center of the element.
|
|
|
|
|
|
prespective:
|
|
|
این ویژگی عمق میدهد به عنصر
|
|
|
transform-style: preserve-3d;
|
|
|
فرزند هم مانند والدش در محیط سه بعدی باشد
|
|
|
transform-style: flat;
|
|
|
اگر این مورد باشد دیگر مورد سه بعدی برا فرزند اعمال نمیشود
|
|
|
backface-visibility:
|
|
|
اگر هیدن باشد برای آن کاری نمیتوان انجام داد و
|
|
|
hidden است
|
|
|
-->
|
|
|
|
|
|
<div class="transforms3d">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="prespective">
|
|
|
<div class="test"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="test2">
|
|
|
متن 1
|
|
|
</div>
|
|
|
|
|
|
<div class="test3">
|
|
|
متن 2
|
|
|
</div>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
