CSS3 width and padding issues

Question

I am trying to create a 3D switching menu. Since these elements are positioned as absolute, it’s difficult for me to learn data-atrribute, it seems that it adds an extra 1 or 2 pixels at the top and left side in different viewports:

Here's what it looks like on the 1366 X 768 viewport:

Here's what it looks like on the 1024 X 768 viewport:

Here is a view of 480 X 768 px

Here is my CSS:

.demo-3 { z-index: 1; position: relative; } .demo-3 a { margin: 0 18px; overflow: hidden; } .demo-3 a span { background: #314559; display: block; padding: 10px 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition:-webkit-transform 0.1s; -moz-transition: -moz-transform 0.1s; -o-transition: -o-transform 0.1s; transition: transform 0.1s; } .demo-3 a::before { content: attr(data-text); right: -20px; width: 100%; height: 100%; color: #314559; background: #fff; z-index: -1; position: absolute; padding: 10px 20px; top: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition:-webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; transition: transform 0.2s; -webkit-transform:translateY(-25%); -moz-transform:translateY(-25%); -ms-transform:translateY(-25%); -o-transform:translateY(-25%); transform:translateY(-25%); } .demo-3 a:hover span, .demo-3 a:focus span { -webkit-transform:translateY(100%); -moz-transform:translateY(100%); -ms-transform:translateY(100%); -o-transform:translateY(100%); transform:translateY(100%); } .demo-3 a:hover::before, .demo-3 a:focus::before { -webkit-transform:translateY(0%); -moz-transform:translateY(0%); -ms-transform:translateY(0%); -o-transform:translateY(0%); transform:translateY(0%); } 

Here is what I want to achieve:

• I want to fix these extra 1px in all viewports
• How can I create a more three-dimensional view that looks like a 3D field when flipped?
• How to set the height of the green background in all viewports. If you resized the screen, it would look like a green background, briefly, especially on small viewports.

Here's the jsFiddle of my codes: http://jsfiddle.net/52qcj2x0/6/

Any idea how to achieve these two?

Answer 1

 div#example { width:50%; height:50%; background-color:#40b3df; color:#ffffff; padding:5%; font-size:200%; } 

 <div id="example"> Sample Text </div> 

Use percent (%)

The best way to remove extra margin is to specify all your margins and margins as a percentage (%) [even font size]. And this is also good practice, because from this your page will be proportional to all other screen resolutions.

For example @bwegs:

div#example { padding:5%; /*or padding:5% 4.5% 5% 4.5%; */ font-size:20%; }

Then, for example, if "div # example" has a width equal to 50% of your screen size, then the indentation will be 5% of this 50%, which means that 5% is equivalent to 10% of your screen size

Answer 2

The object is in 3 dimensions due to shadow. The shadow of the object gives the effect of the 3rd dimension (Z-axis). To give a little 3D effect, try passing the box-shadow style property to Box.

The shadow box will look something like this:

 box-shadow: 10px 10px 5px #888888; 

Parameters are horizontal depth, vertical depth, blur and shadow color, respectively.

Answer 3

This answer only applies to your first point.

They represent rounding errors with your ::before elements, since you have width: 100% , but the explicit width is not set to their parent.

You can try setting .nav a display to block or provide these elements with an explicit width .

Answer 4

I think André Dion's solution will work for question 1.

The solution to two issues:
For you it is worth flipping the box . To make it more 3D, you need to actually rotate it around the X axis and save-3d while the transition is in progress. Take a look at the tutorial to better understand it.

Your question 3 is not clear enough, but I realized that you want to stack your flip boxes when using a smaller screen size. You can take a look at the layout of the boot grid .

Hope this helps!

Answer 5

Oh 3d please check this pen http://codepen.io/robbue/pen/hJDlA

And I also had an update code

 html, body{ margin: 0; padding: 0; } #container-1{ background: #314559; width: 100%; height: auto; } *{ box-sizing: border-box; } h1, h2, h3{ text-align: center; } h1{ font-family: 'Lato', Arial, sans-serif; font-weight: 300; font-size: 52px; padding: 110px 0 20px 0; color: #fff; } h3{ font-family: 'Lato', Arial, sans-serif; font-weight: 400; font-size: 23px; margin-top: 15px; color: #9f9e9b; } a.back{ font-family: 'Lato', Arial, sans-serif; font-weight: 400; float: left; text-decoration: none; font-size: 16px; color: #314559; padding: 20px 15px; border-right: 1px solid #c6d0da; text-transform: uppercase; } a.next{ font-family: 'Lato', Arial, sans-serif; font-weight: 400; float: right; text-decoration: none; font-size: 16px; color: #314559; padding: 20px 15px; border-left: 1px solid #c6d0da; text-transform: uppercase; } a.back:hover, a.next:hover{ background: #5f6f81; color: #fff; } /* LINK GROUP -------------------------------------------------*/ .link-group-1{ background: #4E86BF; padding: 6.04% 0 11% 0; margin-top: 80px; text-align: center; } .link-group-2{ background: #FF8981; padding: 6.04% 0 11% 0; margin-top: 80px; height: auto; text-align: center; } .link-group-3{ padding: 6.04% 0 11.5% 0; background: #2ecc71; margin-top: 80px; height: auto; text-align: center; } .link-group-4{ background: #f8953e; padding: 6.04% 0 11.3% 0; margin-top: 80px; height: auto; text-align: center; } i{ margin-right: 8px;} nav { display: inline-block; } nav a { position: relative; display: inline-block; margin: 12px 20px; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 28px; font-family: 'Lato', Arial, sans-serif; } nav a:hover, nav a:focus { outline: none; } .demo-3 { z-index: 1; position: relative; } .demo-3 a { margin: 0 18px; overflow: hidden; } .demo-3 a span { display: block; padding: 10px 20px; background: #314559; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition:-webkit-transform 0.1s; -moz-transition: -moz-transform 0.1s; -o-transition: -o-transform 0.1s; transition: transform 0.1s; } .demo-3 a::before { content: attr(data-text); right: 0; height: 100%; color: #314559; background: #fff; z-index: -1; position: absolute; padding: 10px 20px; top: 0; left: 0; text-align: center; bottom: 0; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition:-webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; transition: transform 0.2s; -webkit-transform:translateY(-25%); -moz-transform:translateY(-25%); -ms-transform:translateY(-25%); -o-transform:translateY(-25%); transform:translateY(-25%); } .demo-3 a:hover span, .demo-3 a:focus span { -webkit-transform:translateY(100%); -moz-transform:translateY(100%); -ms-transform:translateY(100%); -o-transform:translateY(100%); transform:translateY(100%); } .demo-3 a:hover::before, .demo-3 a:focus::before { -webkit-transform:translateY(0%); -moz-transform:translateY(0%); -ms-transform:translateY(0%); -o-transform:translateY(0%); transform:translateY(0%); } 

 <div id="container-1"> <h1>TESTING TESTING TESTING</h1> <h3>TESTING TESTING</h3> <div class="link-group-3"> <nav class="demo-3"> <a href="demo1.html" data-text="Demo 1"><span>Demo 1</span> </a> <a href="demo2.html" data-text="Demo 2"><span>Demo 2</span></a> <a href="demo3.html" data-text="Demo 3"></i> <span>Demo 3</span></a> <a href="demo4.html" data-text="Demo 4"></i> <span>Demo 4</span></a> </nav> </div> 

About Question 3, you can use vh https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Answer 6

Your first question

It does not add extra pixels for me. Which browser are you using? I am using Chrome.

Your second

While box-flips / preserve-3d will work a bit, you will never get a true 3D effect unless you use one of two things:

• You can try placing the transition on the white part of your button so that when you hover your button is gray to white to act like a shadow. And perhaps the same thing on your blue part.

• With absolute hands down, the best way to get a 3D effect is to use WebGL. It's complicated, it works on most browsers, but it is really nice. This will allow you to use the actual 3d prism that you can rotate. You must use Three.JS .

Answer 7

Wouldn't it be easier to do this:

 .demo-3 a { background: #314559; } 

instead of span if you want all <a> have the same background color?