目录
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>
