"3d"
Bootstrap 4.1.1 Snippet by abhijeetka

<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; 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; } .info-item-category .et_pb_blurb_content{ text-align: center; position: absolute; top: 50px; left: 50px; bottom: 50px; right: 50px; /* background-color: rgba(0, 0, 0, 0.8);*/ padding: 10px 20px; -webkit-transform: translateX(0px); transform: translateX(0px); transition: transform 0.90s cubic-bezier(0.3,0.3,0.3,1); -webkit-transition: -webkit-transform 0.90s cubic-bezier(0.3,0.3,0.3,1); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; align-items: center; -ms-align-items: center; -webkit-align-items: center; justify-content: center; -ms-justify-content: center; -webkit-justify-content: center; flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; display: flex; display: -ms-flex; display: -webkit-flex; } .info-item-category.under { transform: rotateY(180deg); transform-style: preserve-3d; -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; background-size: cover; background-position: center center; -webkit-transition: -webkit-transform 0.90s cubic-bezier(0.5,0.3,0.3,1); transition: transform 0.90s cubic-bezier(0.5,0.3,0.3,1); overflow: hidden; position: absolute; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .info-item-category.under .et_pb_blurb_content{ background-color: rgba(255,255,255,0.9); top: 20px; left: 20px; bottom: 20px; right: 20px; transform: translateX(50%); -webkit-transform: -webkit-translateX(50%); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .item-category:hover .info-item-category { -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .item-category:hover .info-item-category.under { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .item-category:hover .info-item-category.under .et_pb_blurb_content{ transform: translateX(0px); -webkit-transform: translateX(0px); } </style> </div> <!-- .et_pb_code_inner --> </div> <!-- .et_pb_code --> </div> <!-- .et_pb_column --> </div> <!-- .et_pb_row --><div class="et_pb_row et_pb_row_1"> <div class="et_pb_column et_pb_column_1_3 et_pb_column_1 item-category et_pb_css_mix_blend_mode_passthrough"> <div class="et_pb_module et_pb_blurb et_pb_blurb_0 info-item-category et_pb_bg_layout_dark et_pb_text_align_center et_pb_blurb_position_top"> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_top et-animated"></span></span></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header">Clean UI/UX</h4> <div class="et_pb_blurb_description"> </div><!-- .et_pb_blurb_description --> </div> </div> <!-- .et_pb_blurb_content --> </div> <!-- .et_pb_blurb --><div class="et_pb_module et_pb_blurb et_pb_blurb_1 info-item-category under et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top"> <div class="et_pb_blurb_content"> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header">Clean UI/UX</h4> <div class="et_pb_blurb_description"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p> </div><!-- .et_pb_blurb_description --> </div> </div> <!-- .et_pb_blurb_content --> </div> <!-- .et_pb_blurb --> </div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_3 et_pb_column_2 item-category et_pb_css_mix_blend_mode_passthrough"> <div class="et_pb_module et_pb_blurb et_pb_blurb_2 info-item-category et_pb_bg_layout_dark et_pb_text_align_center et_pb_blurb_position_top"> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_top et-animated"></span></span></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header">Responsive Design</h4> <div class="et_pb_blurb_description"> </div><!-- .et_pb_blurb_description --> </div> </div> <!-- .et_pb_blurb_content --> </div> <!-- .et_pb_blurb --><div class="et_pb_module et_pb_blurb et_pb_blurb_3 info-item-category under et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top"> <div class="et_pb_blurb_content"> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header">Responsive Design</h4> <div class="et_pb_blurb_description"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p> </div><!-- .et_pb_blurb_description --> </div> </div> <!-- .et_pb_blurb_content --> </div> <!-- .et_pb_blurb --> </div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_3 et_pb_column_3 item-category et_pb_css_mix_blend_mode_passthrough"> <div class="et_pb_module et_pb_blurb et_pb_blurb_4 info-item-category et_pb_bg_layout_dark et_pb_text_align_center et_pb_blurb_position_top"> <div class="et_pb_blurb_content"> <div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_top et-animated"></span></span></div> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header">24/7 Support</h4> <div class="et_pb_blurb_description"> </div><!-- .et_pb_blurb_description --> </div> </div> <!-- .et_pb_blurb_content --> </div> <!-- .et_pb_blurb --><div class="et_pb_module et_pb_blurb et_pb_blurb_5 info-item-category under et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top"> <div class="et_pb_blurb_content"> <div class="et_pb_blurb_container"> <h4 class="et_pb_module_header">24/7 Support</h4> <div class="et_pb_blurb_description"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p> </div><!-- .et_pb_blurb_description --> </div> </div> <!-- .et_pb_blurb_content --> </div> <!-- .et_pb_blurb --> </div> <!-- .et_pb_column --> </div> <!-- .et_pb_row --> </div> <!-- .et_pb_section --> </div>
.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; } .et_pb_module { -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } .et_pb_text_align_center { text-align: center; } .info-item-category .et_pb_blurb_content { text-align: center; position: absolute; top: 50px; left: 50px; bottom: 50px; right: 50px; /* background-color: rgba(0, 0, 0, 0.8); */ padding: 10px 20px; -webkit-transform: translateX(0px); transform: translateX(0px); transition: transform 0.90s cubic-bezier(0.3,0.3,0.3,1); -webkit-transition: -webkit-transform 0.90s cubic-bezier(0.3,0.3,0.3,1); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; align-items: center; -ms-align-items: center; -webkit-align-items: center; justify-content: center; -ms-justify-content: center; -webkit-justify-content: center; flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; display: flex; display: -ms-flex; display: -webkit-flex; } .et_pb_blurb_content { position: relative; max-width: 550px; margin: 0 auto; text-align: center; } .et_pb_main_blurb_image { display: inline-block; max-width: 100%; margin-bottom: 30px; line-height: 0; } .et_pb_blurb .et_pb_image_wrap { display: block; margin: auto; } .et_pb_blurb_0 .et-pb-icon { font-size: 50px; color: #ffffff; } .et_pb_animation_top.et-animated { opacity: 1; -webkit-animation: fadeTop 1s 1 cubic-bezier(.77,0,.175,1); -moz-animation: fadeTop 1s 1 cubic-bezier(.77,0,.175,1); -o-animation: fadeTop 1s 1 cubic-bezier(.77,0,.175,1); animation: fadeTop 1s 1 cubic-bezier(.77,0,.175,1); } .et-waypoint { opacity: 0; } .et-pb-icon { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: ETmodules; font-size: 96px; font-weight: 400; font-style: normal; font-variant: normal; -webkit-font-smoothing: antialiased; line-height: 1; text-transform: none; content: attr(data-icon); speak: none; } h4 { margin: 0; padding: 0; border: 0; outline: 0; background: 0 0; font-size: 100%; vertical-align: baseline; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} .info-item-category.under { transform: rotateY(180deg); transform-style: preserve-3d; -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; background-size: cover; background-position: center center; -webkit-transition: -webkit-transform 0.90s cubic-bezier(0.5,0.3,0.3,1); transition: transform 0.90s cubic-bezier(0.5,0.3,0.3,1); overflow: hidden; position: absolute; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .et_pb_blurb_1.et_pb_blurb { background-image: url(); .info-item-category.under .et_pb_blurb_content { background-color: rgba(255,255,255,0.9); top: 20px; left: 20px; bottom: 20px; right: 20px; transform: translateX(50%); -webkit-transform: -webkit-translateX(50%); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .item-category:hover .info-item-category.under { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .item-category:hover .info-item-category { -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .item-category:hover .info-item-category.under .et_pb_blurb_content { transform: translateX(0px); -webkit-transform: translateX(0px); }

Related: See More


Questions / Comments: