Bootstrap Snippet 3d using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="et_builder_inner_content et_pb_gutters3"><div class="et_pb_section et_pb_section_0 et_section_regular">
                
                
                
                
                    <div class="et_pb_row et_pb_row_0">
                <div class="et_pb_column et_pb_column_4_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough et-last-child">
                
                
                <div class="et_pb_module et_pb_code et_pb_code_0">
                
                
                <div class="et_pb_code_inner">
                    <style type="text/css">
.item-category {
    width: inherit;
    height: 300px;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-transform: perspective(1000px);
    -ms-transform: perspective(1000px);
    transform: perspective(1000px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.info-item-category {
   /* border: 1px solid #999;*/
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    position: relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.et_pb_blurb_0.et_pb_blurb {
    background-image: linear-gradient(90deg,#2b87da 0%,#29c4a9 100%);
}
.info-item-category {
    /* border: 1px solid #999; */
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    position: relative;
    background-size: cover;
    background-position: center center;
    transition: transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
    -webkit-transition: -webkit-transform 0.90s cubic-bezier(0.5,0.3,0.3,1);
    overflow: hidden;
    top: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
    margin-bottom: 30px;
}
.et_pb_blurb_0 {
    box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.3);
}
.et_pb_module {
    -webkit-animation-duration: .2s;
    -moz-animation-duration: .2s;
    -o-animation-duration: .2s;
    animation-duration: .2s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3d"
Bootstrap 4.1.1 Snippet by abhijeetka

Related: See More

Questions / Comments:

"3d" Bootstrap 4.1.1 Snippet by abhijeetka

Related: See More

Questions / Comments:

"3d"
Bootstrap 4.1.1 Snippet by abhijeetka