Menu
I am making a simple example to demonstrate CSS3 Perspective property to add a 3D side flip effect. However following simple example, cannot get it done!
<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> Reference: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_perspective1
399
Change transform: perspective(100px) into perspective: 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>Try as below, you have defined transform:perspective,whereas perspective is a individual css3 property.
When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
