CSS perspective does not work for me

Question

CSS perspective does not work for me

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have the following code code, but for some reason it does not work for me.

#bienvenida1{		
	width:880px;
	height:320px;
	position:relative;
	top:50px;
	left:40px;
	perspective:150px;
	-webkit-perspective:150px;
}

#bienvenida2{
	background-color:#7596ff;
	position:absolute;
	border:1px solid black;
	-webkit-transform: rotateX(20deg);
    	transform: rotateX(20deg);	
}

 



<div id="bienvenida1">
    <div id="bienvenida2"></div>
</div>

The table is not displayed in the browser as it should be.

html5 css3

asked by Nemeium 29.03.2017 в 06:41

source

2 answers

0

If the position of the second div you want to be absolute , then you could try this if you want to center it as in the image:

#bienvenida2{
    top:25%;
    left: 25%; 
    width: 50%;
    height: 50%;
    position:absolute;
    background-color:#7596ff;
    border:1px solid black;
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);  
}

Put a background or border to div father to see clearly where you want to position the second.

answered by 29.03.2017 в 09:53

My SQLite database is not generated Why can not some photos on my blog be seen? [closed]

score 0 · Accepted Answer

In #bienvenida2 you forgot to put the padding . The padding is the one that will allow you to control the size of the box you are breaking.

For the width you are handling a padding 100px 400px; will give you the effect similar to the one you show in the example:

#bienvenida2{
    padding:100px 400px;
    background-color:#7596ff;
    position:absolute;
    border:1px solid black;
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);  
}