Support Forummake a single image 3d flip – Support Forum https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/feed/ Fri, 04 Sep 2026 00:57:11 +0200 http://bbpress.org/?v=2.5.12-6148 en-US https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8373 <![CDATA[make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8373 Wed, 20 May 2015 17:11:57 +0000 claraelisa Hi

i want to apply the 3d flip and 3d cube effect to single images without having to create a portfolio item. ¿is this possible?

Thanks in advance

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8380 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8380 Thu, 21 May 2015 06:01:29 +0000 IshYoBoy Hey,

This can be done with CSS3 Styles. Check out these links where you can learn how it is done:

Create a CSS Flipping Animation


https://css-tricks.com/snippets/css/flip-an-image/

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8421 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8421 Fri, 22 May 2015 19:43:56 +0000 claraelisa Hi

The code provided doesn’t work properly. Somehow affects the element below the html code i put. please check this link to see what i’m talking about.

https://www.mystic.com.co/fluotest/test-flip/

This is my code

HTML
<div class=”flipo-container” ontouchstart=”this.classList.toggle(‘hover’);”>
<div class=”flipperi”>
<div class=”fronti” style=”background:#faa;>
hello
</div>
<div class=”backi” style=”background:#ccc;>
goodye
</div>
</div>
</div>

CSS child-Theme

/* entire container, keeps perspective */
.flipo-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flipo-container:hover .flipperi, .flipo-container.hover .flipperi {
transform: rotateY(180deg);
}

.flipo-container, .fronti, .backi {
width: 320px;
height: 480px;
}

/* flip speed goes here */
.flipperi {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.fronti, .backi {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.fronti {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.backi {
transform: rotateY(180deg);
}

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8449 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8449 Mon, 25 May 2015 09:56:50 +0000 IshYoBoy Hey,

Unfortunately this is not a theme related problem but a custom code. If you wish we can help out and test the code, but we have a flat hourly rate for such works. Feel free to contact us on hello@ishyoboy.com if you are interested.

Apart from that try looking at https://stackoverflow.com/ or other help servers for a solution.

Maybe enter the code in an text element and add more CSS styles to isolate it from the rest.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8483 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8483 Wed, 27 May 2015 14:06:48 +0000 claraelisa I found a solution

Thanks!

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8497 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8497 Thu, 28 May 2015 06:45:46 +0000 IshYoBoy Perfect! ;)

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8553 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8553 Mon, 01 Jun 2015 13:33:23 +0000 claraelisa Hi. I love this template so far :)

I though i found a solution but it didn’t last too long before it conflicts the template. Can you please give me the css you use to create the 3d flip and 3d cube animation on hover. I want to apply this effect without having to create a portfolio item.

I appreciate your help

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8556 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8556 Tue, 02 Jun 2015 05:51:58 +0000 IshYoBoy Hey,

There is quite a lot of CSS but you can have a look at the file:
wp-content/themes/boldial/assets/frontend/css/sass/_portfolio.scss

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8560 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8560 Tue, 02 Jun 2015 14:00:01 +0000 claraelisa wow!! thats a lot. i just needed to make an image flip, can you just please show me the code to do that. Its something i like from your template but i want to apply that effect to any image. Just please give me a couple lines of code.

]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8564 <![CDATA[Reply To: make a single image 3d flip]]> https://support.ishyoboy.com/forums/topic/make-a-single-image-3d-flip/#post-8564 Wed, 03 Jun 2015 06:42:17 +0000 IshYoBoy Hey,

All the code is available in the mentioned file under line number 390, below the comment “Hover effect – flip”.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]>