CSS3 3D变换实例 滚动的正方体
程序员文章站
2022-03-27 17:11:56
...
笔记：
2D变换
transform
位移
translateX() translateY()
简写：translate(X值，Y值) 正值向右，负值向左
旋转 rotate()
rotate(？deg) 括号中为角度值 正值是顺时针旋转，负值是逆时针旋转
缩放 scale()
scale() 括号中为数值，可以为浮点数 如大于1是放大效果，小于1是缩小效果
变形（斜切）
skewX() skewY()
简写：skew(X轴斜切角度，Y轴斜切角度)
body:hover div{
transform:translate(100px,100px) rotate(30deg) scale(1.5) skew(40deg,40deg)
}
解析顺序：根据transform内写的顺序进行解析。
变换原点：
transform-orign:
left right top bottom
center（默认） 当设置相应的值后，会按照相应设置的值发生变换。
3D变换
3D效果：首先给需要进行3D变换元素的父级添加3D环境和景深。
写法：
transform-style:preserve-3d; <!--添加3D环境-->
perspective:数值; 如：300px; <!--景深--> 数值较低的话无效果
transform
rotateX 沿X轴旋转：正值向右翻转，负值向左翻转
rotateY 沿y轴旋转：正值向右翻转，负值向左翻转
rotateZ 沿z轴旋转：正值向屏幕外，负值向屏幕内
translateX 沿X轴位移：正值向右，负值向左
translateY 沿y轴位移：正值向下，负值向上
translateZ 沿z轴位移：正值向屏幕外，负值向屏幕内
实例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>3D正方形实例</title>
6 <style type="text/css">
7 #box{
8 width: 100px;
9 height: 100px;
10 padding: 100px;
11 margin: 100px auto;
12 perspective:300px;
13 }
14
15 #val{
16 width: 100px;
17 height: 100px;
18 position: relative;/*设置相对定位*/
19 transform-style: preserve-3d;/*给父级设置3D环境*/
20 transform-origin: center center -50px;/*沿中轴线转动*/
21 transition: 1s;/*响应时间1s*/
22 }
23 #val div{
24 position: absolute;/*设置绝对定位*/
25 width: 100px;
26 height: 100px;
27 background: blue;
28 text-align: center;
29 font: 40px/100px "微软雅黑";
30 }
31 #val div:nth-of-type(1){
32 background: yellow;
33 }
34 #val div:nth-of-type(2){
35 left:-100px;/*定位 沿X轴向左移动100px*/
36 background: red;
37 transform-origin: right;/*位移点为右边*/
38 transform:rotateY(-90deg);/*向Y轴翻转向左90度*/
39 }
40 #val div:nth-of-type(3){
41 top:-100px;/*定位 沿Y轴向上移动100px*/
42 background:pink;
43 transform-origin: bottom;/*位移点为下边*/
44 transform:rotateX(90deg); /* 沿X轴向内翻转90度*/
45 }
46 #val div:nth-of-type(4){
47 left:100px;
48 background: #FF6600;
49 transform-origin: left;
50 transform:rotateY(90deg);
51 }
52 #val div:nth-of-type(5){
53 top:100px;
54 background: #1883BA;
55 transform-origin: top;
56 transform:rotateX(-90deg);
57 }
58 #val div:nth-of-type(6){
59 background: gray;
60 transform:translateZ(-100px) rotateX(-180deg); /*翻转180度,不然数字6为镜像显示*/
61 }
62 #val:hover {
63 transform: rotateY(360deg) ; /*鼠标停留,X轴旋转360度,Y轴旋转30度*/
64 }
65 </style>
66 </head>
67 <body>
68 <div id="box">
69 <div id="val">
70 <div>1</div>
71 <div>2</div>
72 <div>3</div>
73 <div>4</div>
74 <div>5</div>
75 <div>6</div>
76 </div>
77 </div>
78 </body>
79 </html>
实现效果：鼠标停留，立方体旋转。
更多专业前端知识，请上【猿2048】www.mk2048.com