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..

    How do I selectively stack columns with twitter bootstrap

    How to design resolution independent CSS elements?

    Jquery CSS How To Use Margin: 0 auto

    How to uniformly darken colors?

    How to Detect css by iPhone/iPad

    How to use mapbox.js as a background so that html content and Navbar stay visible on top?

    How to hide a segment of my website using PHP

    How can I change my code from PHP to HTML?

    Basic CSS Question: How to specify height of background image of div?

    How to center a CSS Hexagon

    How to Inject external css style sheet into GWT Panel widget?

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to combine slide-in panels with sticky header?

    How do I display epub format book in pure HTML5/CSS/Jquery

    How to Change blue background selection color from image using css

    How to align two columns of text in CSS

    How to draw a horizontal line between two circles with css?

    How to fix IE7 float-clear combination

    How to wrap text in css

    How do I change this flipping card to rotate itself onclick?

    How do I resize images on Android?

    how do i change button/image onclick to active state?

    How to change the slide picture when resize browser size

    HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

    CSS - How to working with multi-level menu by simple

    Using CSS to style a Sencha Touch form - how do I find the elements?

    How i can create dynaminc ordered list items with pure css

    Image title both alingn. How to make each element aligned vertically?

    How to add custom CSS for displaying on mobile screens in WordPress?

    How does a CSS rule override another CSS rule?