foto html - css     . Cliparts - Foto 3D

Omschrijving   Voorbeeld 1

Leuke 3D effecten die je maakt met css. Ik heb vier leuke effecten er neer gezet.   1

In de css

container {
width: 400px;
height: 300px;
border: 0px;
margin: 0 auto 60px;
position: relative;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;}
#rotate-x .panel {
-webkit-transform: rotateX( 45deg );
-moz-transform: rotateX( 45deg );
-o-transform: rotateX( 45deg );
transform: rotateX( 45deg );}

Tussen de bodytags

<div id="rotate-x" class="container">
<div class="panel"><img src="foto.jpg"></div>

    Voorbeeld 2

    2

In de css

.container {
width: 400px;
height: 300px;
border: 0px;
margin: 0 auto 60px;
position: relative;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;} #rotate-x .panel {
-webkit-transform: rotatey( 45deg );
-moz-transform: rotatey( 45deg );
-o-transform: rotatey( 45deg );
transform: rotatey( 45deg );}

Tussen de bodytags

<div id="rotate-x" class="container">
<div class="panel"><img src="foto.jpg"></div>
</div>

    Voorbeeld 3

    3

In de css

.container {
width: 400px;
height: 300px;
border: 0px;
margin: 0 auto 60px;
position: relative;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;} #rotate-x .panel {
-webkit-transform: rotatey( 150deg );
-moz-transform: rotatey( 150deg );
-o-transform: rotatey( 150deg );
transform: rotatey( 150deg );}

Tussen de bodytags

<div id="rotate-x" class="container">
<div class="panel"><img src="foto.jpg"></div>
</div>

    Voorbeeld 4

    4

In de css

.container {
width: 400px;
height: 300px;
border: 0px;
margin: 0 auto 60px;
position: relative;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;} #rotate-x .panel {
-webkit-transform: rotateX( -45deg );
-moz-transform: rotateX( -45deg );
-o-transform: rotateX( -45deg );
transform: rotateX( -45deg );}

Tussen de bodytags

<div id="rotate-x" class="container">
<div class="panel"><img src="foto.jpg"></div>
</div>

end
terug
home