Clever Geek Handbook

CSS3 Perspective is not rendered

I am making a simple example to demonstrate the CSS3 Perspective property to add a 3D side anti-aliasing effect. However, following a simple example won't work!

<html>
<head>
<style>
    .div1{height:300px;width:300px;position:relative;transform:perspective(100px);border:1px solid black;margin:20px;padding:10px;}
    .div2{position:absolute;background:yellow;transform:rotateY(45deg);}
</style>
</head>
<body> 
  <div class="div1">
      <div class="div2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat enim. Sed vel rutrum justo. Sed pharetra, erat sit amet dictum tristique, nisi ante rhoncus lectus, sed sodales nibh odio sed sem. Donec in ligula vitae lacus volutpat lobortis. Nam justo libero, consectetur a pharetra ut, pharetra non dui.
      </div>
  </div>
</body> 
</html>
Run codeHide result


Link: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_perspective1

+3


source to share


4 answers


Change transform: perspective(100px)

toperspective: 100px 



<html>
<head>
<style>
    .div1{height:300px;width:300px;position:relative;perspective:100px;border:1px solid black;margin:20px;padding:10px;}
    .div2{position:absolute;background:yellow;transform:rotateY(45deg);}
</style>
</head>
<body> 
  <div class="div1">
      <div class="div2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat enim. Sed vel rutrum justo. Sed pharetra, erat sit amet dictum tristique, nisi ante rhoncus lectus, sed sodales nibh odio sed sem. Donec in ligula vitae lacus volutpat lobortis. Nam justo libero, consectetur a pharetra ut, pharetra non dui.
      </div>
  </div>
</body> 
</html>
Run codeHide result


+3


source


Try as shown below, you have identified transform:perspective

, whereas perspective

is individual css3 property

.

When you define a perspective property for an item, it is the BABY items that get the perspective view, not the item itself.



 .div1{
 height:300px;
 width:300px;
 position:relative;
 perspective:100px;
 border:1px solid black;
 margin:20px;
 padding:10px;
 overflow:hidden;
 }
.div1 > .div2{
 position:absolute;
 background:yellow;
 transform:rotateY(0deg);
 transition:0.6s ease;
 }
 .div1:hover > .div2{
   transform:rotateY(180deg);
 }
      

        
        
        
      

    
<div class="div1">
      <div class="div2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat enim. Sed vel rutrum justo. Sed pharetra, erat sit amet dictum tristique, nisi ante rhoncus lectus, sed sodales nibh odio sed sem. Donec in ligula vitae lacus volutpat lobortis. Nam justo libero, consectetur a pharetra ut, pharetra non dui.
      </div>
  </div>
Run codeHide result


+2


source


You are missing these lines in your styles:

-webkit-perspective: 150px;
-webkit-transform: rotateX(45deg);

As mentioned, they are required for Chrome, Safari and Opera . Adding these lines to the styles will produce the desired result. See screenshot:

enter image description here

+1


source 


<html>
<head>
<style>
    .div1{height:300px;width:300px;position:relative;;border:1px solid black;margin:20px;padding:10px;-moz-perspective: 300px;-webkit-perspective: 300px;perspective: 300px;transform-style: preserve-3d;}
    .div2{position:absolute;background:yellow;transform:rotateX(45deg);   }
</style>
</head>
<body> 
  <div class="div1">
      <div class="div2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat enim. Sed vel rutrum justo. Sed pharetra, erat sit amet dictum tristique, nisi ante rhoncus lectus, sed sodales nibh odio sed sem. Donec in ligula vitae lacus volutpat lobortis. Nam justo libero, consectetur a pharetra ut, pharetra non dui.
      </div>
  </div>
</body> 
</html>
Run codeHide result


0


source






More articles:


All Articles