Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
259 lines (240 sloc) 5.71 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>transform示例</title>
<style>
body {
padding: 300px;
}
.box {
width: 150px;
height: 150px;
background: #ddd;
opacity: .5;
margin-bottom: 50px;
border: 1px solid #999;
text-align: center;
padding: 50px 0;
box-sizing: border-box;
color: green;
}
/* .box {
width: 150px;
height: 150px;
background: #ddd;
opacity: .5;
margin-bottom: 50px;
border: 1px solid #999;
text-align: center;
line-height: 150px;
} */
.perspective {
perspective: 600px;
}
.translateX {
transform: translateX(150px);
}
.translateY {
transform: translateY(-150px);
}
.translateXY {
transform: translate(150px, -150px);
}
.translateZ {
transform: perspective(300px) translateZ(-300px);
}
.translate3d {
transform: perspective(300px) translate3d(80px, 80px, 80px);
}
.scaleX {
transform: scaleX(1.2);
}
.scaleY {
transform: scaleY(1.2);
}
.scaleXY {
transform: scale(1.2);
}
.rotateX {
transform: rotateX(45deg);
}
.rotateY {
transform: rotateY(45deg);
}
.rotateXY {
transform: rotate(45deg);
}
.skewX {
transform: skewX(30deg);
}
.skewY {
transform: skewY(30deg);
}
.skewXY {
transform: skewX(30deg);
}
.transform-origin {
transform-origin: 0 0;
transform: rotate(45deg);
}
@keyframes rotateXYZ {
0% {
/* transform: rotate3d(0, 0, 0, 0); */
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
/* transform: rotate3d(1, 1, 1, 360deg); */
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.stage-3d {
perspective: 300px;
position: relative;
width: 200px;
height: 200px;
/* perspective-origin: 200% -100%; */
perspective-origin: 50%;
margin-bottom: 300px;
}
.cube {
width: 100%;
height: 100%;
margin-top: 100px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-20px);
animation: rotateXYZ 10s linear infinite;
}
.plane {
height: 200px;
width: 200px;
color: #fff;
border: 1px solid #999;
position: absolute;
opacity: .5;
text-align: center;
padding: 90px 0;
box-sizing: border-box;
}
.front {
transform: translateZ(100px);
background:red;
opacity: .5;
}
.backend {
transform: translateZ(-100px);
background:red;
}
.left {
background: blue;
transform: rotateY(-90deg) translateZ(100px);
}
.right {
background: blue;
transform: rotateY(90deg) translateZ(100px);
}
.bottom {
background: green;
transform: rotateX(-90deg) translateZ(100px);
}
.top {
background: green;
transform: rotateX(90deg) translateZ(100px);
}
@keyframes zhuanquan {
0% {
transform: rotateY(0)
}
100% {
transform: rotateY(360deg);
}
}
.stage-3d-liumian {
perspective: 800px;
width: 200px;
height: 200px;
}
.liumian {
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: zhuanquan 15s linear infinite;
}
.item {
height: 200px;
width: 200px;
color: #fff;
border: 1px solid #999;
position: absolute;
opacity: .5;
text-align: center;
padding: 90px 0;
box-sizing: border-box;
}
.one {
transform: rotateY(0) translateZ(181.4px);
background:red;
}
.two {
transform: rotateY(60deg) translateZ(181.4px);
background: green;
}
.three {
transform: rotateY(120deg) translateZ(181.4px);
background: blue;
}
.four {
transform: rotateY(180deg) translateZ(181.4px);
background:red;
}
.five {
transform: rotateY(240deg) translateZ(181.4px);
background: green;
}
.six {
transform: rotateY(300deg) translateZ(181.4px);
background: blue;
}
</style>
</head>
<body>
<div class="box translateX">translateX</div>
<div class="box translateY">translateY</div>
<div class="box translateXY">translate</div>
<div class="box translateZ">translateZ必须设置perspective</div>
<div class="box translate3d">translate3d必须设置translateZ必须设置perspective</div>
<div class="box scaleX">scaleX</div>
<div class="box scaleY">scaleY</div>
<div class="box scaleXY">scale</div>
<div class="box rotateX">rotateX</div>
<div class="box rotateY">rotateY</div>
<div class="box rotateXY">rotate</div>
<div class="box skewX">skewX</div>
<div class="box skewY">skewY</div>
<div class="box skewXY">skew</div>
<div class="box transform-origin">改变transform-origin之后的rotate</div>
<div class="stage-3d">
<div class="cube">
<div class="plane top">top</div>
<div class="plane bottom">bottom</div>
<div class="plane left">left</div>
<div class="plane right">right</div>
<div class="plane backend">backend</div>
<div class="plane front">front</div>
</div>
</div>
<div class="stage-3d-liumian">
<div class="liumian">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
<div class="item five">5</div>
<div class="item six">6</div>
</div>
</div>
</body>
</html>
You can’t perform that action at this time.