How to create a standing up 3D text effect with Css3 transforms


Tags: html,css,css3

Problem :

I'm looking to recreate an effect like this with CSS 3D Transforms: 3D text

How do I achieve this? Here's what I've got so far

body {
  perspective: 400px;
  transition: perspective 1s;
}
.grid {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("http://i.imgur.com/3ACizko.jpg");
  background-size: cover;
  height: 400px;
  width: 400px;
  transform: rotateX(60deg);
  margin: 0 auto;
  transition: transform 1s;
  perspective: 400px;
}
.grid p {
  transition: transform 1s;
  transform: rotateX(-60deg);
}
<div class="grid">
  <p>Hello</p>
</div>

I thought that if I rotated the background surface 60 degrees and rotated the text -60 degrees it would cancel out the effect but apparently not?

Anyway, thanks in advance.



Solution :

Yes, ther solution to your problem is using transform-style: preserve-3d.

But the problem with this is that IE does not support this property

A way to make it work in IE is to use a pseudo element on the p

.grid {
  font-size: 30px;
  position: relative;
  left: 100px;
  top: 200px;
  perspective: 200px;
  perspective-origin: 0% 50%;
 }

.grid:after {
  content: "";
  position: absolute;
  width: 300px;
  height: 200px;
  top: -100px;
  left: -100px;
  transform: rotateX(30deg);
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 47px, black 47px, black 50px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 47px, black 47px, black 50px);
  }
<p class="grid">Hello</p>


    CSS Howto..

    I want to add same function for two css class. How can I do it?

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to align this text in CSS?

    How do I get an object from d3.data()?

    how create triangle using css [duplicate]

    How do I trigger the popup dialog box automatically from iWebkit?

    css responsive background image not showing

    How do I enable scrolling only in one direction in CSS?

    How to apply IE11 specific css [closed]

    HTML code to show splitted data_frame in one html page using python

    CSS clearfix how to over come the inability to center an element using it

    How to make a parent --> node relationship in css?

    How to change underline thickness of an a-tag without using border?

    How can I set the style of a dojo-element?

    How to fix header cannot sticky in wordpress?

    Hide/Show Content at Specific Scroll Positions

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    how to replace url in css using regexp (javascript)

    How to hide specific TD borders in a TABLE using CSS

    Using Javascript or JQuery to show/hide on click, and change image as well

    How can I force LESS (css) to recognize a variable?

    How to select only for the first of divs with equal names?

    How to transform Menu icon to Arrow icon? [closed]

    how do you link css to a jade file?

    How to test .css file for syntax errors?

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    How to make one string from a sentence capital in HTML/CSS?

    How to refer to css file in codeigniter?

    How do you target div last-child within another div?

    how to manage Css Floats