Xin's blog Xin's blog
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

Xin

英雄可不能临阵脱逃啊~
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • HTML

  • CSS

    • 知识点

    • 案例

      • flex布局案例-网格布局
      • flex 布局,让某个子元素靠右对齐
      • transform案例
        • 结合perspective和transform-style实现两面翻转盒子的效果
        • 简易版旋转木马
      • 文字在一行或两行时超出显示省略号
      • CSS智慧阴影
      • css3渐变的使用
      • CSS3模糊的使用
      • 扫光特效
      • 「布局技巧」图片未加载前自动撑开元素高度
      • 水平垂直居中的几种方式-案例
      • 如何根据系统主题自动响应CSS深色模式
      • 「css技巧」使用hover和attr()定制悬浮提示
  • JavaScript

  • Vue

  • 组件与插件

  • css扩展语言

  • 学习笔记

  • 前端
  • CSS
  • 案例
ctrlwin
2021-08-06

transform案例

# transform案例

# 结合perspective和transform-style实现两面翻转盒子的效果

代码示例:

<div class="container-trans">
    <div class="content-trans">
        <div class="front">正面</div>
        <div class="back">反面</div>
    </div>
</div>
1
2
3
4
5
6
.container-trans {
    perspective: 800px; /*重点:开启3d透视效果*/
}

.content-trans {
    margin: 0 auto;
    width: 220px;
    height: 220px;
    line-height: 220px;
    font-size: 16px;
    text-align: center;
    position: relative;
    transform-style: preserve-3d; /*重点:开启子元素的3d效果*/
    transition: all 1s;
}

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

.front,
.back {
    position: absolute;
    width: 100%;
    height: 100%;
}

.front {
    background-color: violet;
    z-index: 999;
}

.back {
    background-color: yellow;
    transform: rotateY(180deg); /*重点:将背面展示的盒子先转过去*/
}
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

效果:

<html>
    <div class="container-trans">
        <div class="content-trans1">
            <div class="front">我是正面</div>
            <div class="back">我是背面</div>
        </div>
    </div>
</html>

<style>
.container-trans {
    perspective: 800px; 
}

.content-trans1 {
    margin: 0 auto;
    width: 220px;
    height: 220px;
    line-height: 220px;
    font-size: 16px;
    text-align: center;
    position: relative;
    transform-style: preserve-3d; 
    transition: all 1s;
}

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

.front,
.back {
    position: absolute;
    width: 100%;
    height: 100%;
}

.front {
    background-color: #7bed9f;
    z-index: 999;
}

.back {
    background-color: #70a1ff;
    transform: rotateY(180deg); 
}
</style>
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

# 简易版旋转木马

代码示例:

<div class="container-rotate">
    <section class="rotate">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</div>
1
2
3
4
5
6
7
8
9
10
.rotate {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 150px auto;
    transform-style: preserve-3d;  /*开启3d透视*/ 
    animation: rotate 10s linear infinite;
    background-color: salmon;
}

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.rotate:hover {
    animation-play-state: paused; /*鼠标放上去时暂停动画*/ 
}

.rotate div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rotate div:nth-child(1) {
    background-color: red;
    transform: translateZ(300px);
}

.rotate div:nth-child(2) {
    background-color: orange;
    transform: rotateY(60deg) translateZ(300px);
    /*注意:一定要先旋转再移位,因为坐标轴也会跟着旋转,也就是旋转后坐标轴已经改变,这样才能实现效果*/
}

.rotate div:nth-child(3) {
    background-color: green;
    transform: rotateY(120deg) translateZ(300px);
}

.rotate div:nth-child(4) {
    background-color: cyan;
    transform: rotateY(180deg) translateZ(300px);
}

.rotate div:nth-child(5) {
    background-color: blue;
    transform: rotateY(240deg) translateZ(300px);
}

.rotate div:nth-child(6) {
    background-color: purple;
    transform: rotateY(300deg) translateZ(300px);
}
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
<html>
    <div class="container-rotate">
        <section class="rotate">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </div>
</html>

<style>
.container-rotate{
    perspective: 800px;
    perspective-origin: 100px;
}
.rotate {
    position: relative;
    width: 150px;
    height: 130px;
    margin: 0 auto;
    transform-style: preserve-3d;  /*开启子元素3d效果*/
    animation: rotate 10s linear infinite;
    background-color: salmon;
}

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.rotate:hover {
    animation-play-state: paused; 
}

.rotate div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rotate div:nth-child(1) {
    background-color: red;
    transform: translateZ(300px);
}

.rotate div:nth-child(2) {
    background-color: orange;
    transform: rotateY(60deg) translateZ(300px);
}

.rotate div:nth-child(3) {
    background-color: green;
    transform: rotateY(120deg) translateZ(300px);
}

.rotate div:nth-child(4) {
    background-color: cyan;
    transform: rotateY(180deg) translateZ(300px);
}

.rotate div:nth-child(5) {
    background-color: blue;
    transform: rotateY(240deg) translateZ(300px);
}

.rotate div:nth-child(6) {
    background-color: purple;
    transform: rotateY(300deg) translateZ(300px);
}
</style>
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
在GitHub上编辑 (opens new window)
上次更新: 1/20/2022, 11:27:12 AM

← flex 布局,让某个子元素靠右对齐 文字在一行或两行时超出显示省略号→

最近更新
01
createElement函数创建虚拟DOM
05-26
02
clipboard 剪切板属性
05-26
03
vue的权限管理
05-16
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×