目录
1 2D转换
2 3D转换
3 案例：旋转的魔方
1 2D转换
## 2D转换
☞ 位移
transform: translate(100px,100px);
备注：
位移是相对元素自身的位置发生位置改变☞ 旋转
transform: rotate(60deg);
备注：
取值为角度
☞ 缩放
transform: scale(0.5,1);
备注：
取值为倍数关系，缩小大于0小于1，放大设置大于1
☞ 倾斜
transform: skew(30deg,30deg);
备注：
第一个值代表沿着x轴方向倾斜
第二个值代表沿着y轴方向倾斜<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { height: 100px; background-color: pink; } .one { width: 100px; height: 100px; background-color: red; margin: 0 auto; } .box:hover .one { /* 2d转换位移： 改变元素位置 */ transform: translate(100px, 0px); /* 缩放：设置的是倍数 */ /* transform: scale(0.5,1); */ /*旋转*/ /* transform: rotate(60deg); */ /*倾斜*/ /* transform: skew(30deg,30deg); */ } </style> </head> <body> <div class="box"> <div class="one">asdfafd</div> </div> </body>
2 3D转换
## 3D转换
☞ 位移
transform: translateX() translateY() translateZ()☞ 旋转
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);☞ 缩放
transform: scaleX(0.5) scaleY(1) scaleZ(1);
☞ 倾斜
transform: skewX(30deg) skewY();☞ transform-style: preserve-3d;
将平面图形转换为立体图形<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .one { width: 500px; height: 500px; border: 1px solid red; margin: 100px auto; /* 透视: 在网页中实现近大远小; 结合translateZ(200px)使用 在垂直页面的方向移动*/ perspective: 1000px; } .box { width: 100px; height: 100px; background-color: red; margin: 200px; } .one:hover .box { transform: translateZ(200px); } </style> </head> <body> <div class="one"> <div class="box"></div> </div> </body>
3 案例：旋转的魔方
会自动旋转，鼠标扫过时暂停旋转
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; margin:0; padding:0; } .box { width: 300px; height: 300px; margin: 150px auto; position: relative; font-size: 50px; /*perspective: 1000px;*/ transform-style: preserve-3d; animation: rotate 10s linear infinite alternate; } .box>div { width: 300px; height: 300px; position: absolute; } .right { background-color: transparent; transform: rotateY(90deg) translateZ(150px); } .left { background-color: transparent; transform: rotateY(-90deg) translateZ(150px); } .top { background-color: transparent; transform: rotateX(90deg) translateZ(150px); } .bottom { background-color: transparent; transform: rotateX(-90deg) translateZ(150px); } .before { background-color: transparent; transform: translateZ(150px); } .back { background-color: transparent; transform: translateZ(-150px); } li { float: left; width: 90px; height: 90px; border-radius: 20px; margin: 5px; text-align: center; line-height: 90px; } .before li { background-color: green; } .back li { background-color:chartreuse; } .top li { background-color: purple; } .bottom li { background-color: cornflowerblue; } .left li { background-color: darkorange; } .right li { background-color: #37ffc7; } .box:hover { animation-play-state: paused; } @keyframes rotate { 0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); } 20% { transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg); } 40% { transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg); } 60% { transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg); } 80% { transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg); } 100% { transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg); } } </style> </head> <body> <div class="box"> <div class="before"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="back"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="top"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="bottom"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="left"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="right"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> </div> </body> </html>
