CSS3转换透视旋转

CSS3思维导图

3D转换

  1. x右面为正，左边为负
  2. y下面为正，上面为负
  3. z外面为正，里面为负
  4. transform:translate3d(x,y,z),且xyz都不能省略

透视perspective

透视（视距）写到被观察元素的父盒子上

3D旋转

  1. 可以沿着xyz分别旋转，加透视效果更明显
  2. 使用左手定则判断方向
  3. transform:rotate3d(x,y,z,ndeg)
  4. 3d呈现transform-style:flat/preserve-3d,代码写给父级，影响的时子盒子

查看案例代码

  1. 有3d翻转效果和旋转木马效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
* {
    padding: 0;
    margin: 0;
}

body {
    -webkit-transform: translate3d(0, 0, 0) ;
    transform: translate3d(0, 0, 0);
    /* perspective:1200px; */
    
    }

.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transform-style: preserve-3d;
    transition: all 2s;
}

.box:hover {
    transform: rotateY(-180deg);
}

/* .box:hover .back {
    transform: rotateY(180deg);
}  */

 .front,.back {
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 40px;
    text-align: center;
    line-height: 200px;
}

.front {
    background-color: #9b6ab5;
    z-index: 1;
}

.back {
    background-color: #ce485c;
    transform: rotateY(180deg);
}

.box2 {
    position: relative;
    height: 35px;
    width: 100px;
    margin: 100px auto;
    transform-style: preserve-3d;
    transition: all .6s;
}
.box2:hover{
    transform: rotateX(90deg);
}

.box2 ul li {
    list-style: none;
    height: 35px;
    width: 100px;
}

.b1, .b2 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
    text-align: center;
    line-height: 35px;
}

.b1 {
    background-color: #5757ff;
    z-index: 1;
    transform: translateZ(17.5px);
}

.b2 {
    background-color: #268354;
    transform:translateY(17.5px) rotateX(-90deg);
}

section{
    width: 156px;
    height: 502px;
    position: relative;
    margin: 50px auto;
    transform-style: preserve-3d;
    animation: rotate 5s linear infinite;
}
@keyframes rotate{
    0%{
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
}
section img{
    position: absolute;
    display: block;
    margin: 0 auto;
    width: 100%;
    top: 0;
    left: 0;
}
section img:nth-child(1){
    transform: translateZ(300px);
}
section img:nth-child(2){
    transform: rotateY(60deg)translateZ(300px) ;
}
section img:nth-child(3){
    transform:rotateY(120deg) translateZ(300px) ;
}
section img:nth-child(4){
    transform:rotateY(180deg) translateZ(300px)  ;
}
section img:nth-child(5){
    transform: rotateY(240deg) translateZ(300px);
}
section img:nth-child(6){
    transform:rotateY(300deg) translateZ(300px);
}


CSS移动端

  1. meta视口标签
  2. neme="viewport" content="width=device-width,user-scalable=no,initial-scale=1"

background

  1. bgs可以跟像素单位或百分比，
  2. background-size:cover/contain（等比拉伸）

特殊样式

  1. 盒子模型box-sizing;border-box,-webkit-box-sizing:border-box
  2. 点击高亮清除-webkit-tap-highlight-color:transparent
  3. 清除移动端ios按钮样式-webkit-appearance:none
  4. 禁用长按页面时的弹出菜单 img,a{-webkit-touch-callout;none}