CODEWITHSUNDEEP
javascripthtmlcssmacos
myleschuahiock
myleschuahiock

Reputation: 303

CSS - How to make Mac OSX dock in CSS? Is there a third parameter other than height or width?

How do you style this 3D transformed dock to have "depth" and not just have height and width?

enter image description here

(Notice at the rounded corner at the bottom, there's some grey "depth" around 3-5 pixels)

enter image description here

Here is how my CSS looks like right now: 

.dock{
  transform: matrix3d(1,0,0.00,0,0.00,1,0.00,-0.0015,0,0,1,0,0,0,0,1);
  width:800px;
  height:80px;  
  perspective: 300px;
  opacity:0.8;
  position:fixed;
  bottom:20px;
  left:50%;
  margin-left: -400px;
  border-radius:5px;
  background: -webkit-linear-gradient(grey, white);
}

Much help would be appreciated!

EDIT: Thanks so much for the help. Got this down in less than 5 minutes. Amazing!

Upvotes: 1

Views: 727

Answers (1)

Thomas
Thomas

Reputation: 12637

transform: perspective(200px) rotateX(45deg); should do the job. You may want to change the values.

If you want to transform multiple nodes to the same vanishing point, you should read about the perspective-css-property.

Here is a good introduction on this topic: https://css-tricks.com/almanac/properties/p/perspective/

Upvotes: 2

Related Questions