The perspective matrix is computed as follows:
Start with the identity matrix.
Translate by the computed X and Y values of perspective-origin
Multiply by the matrix that would be obtained from the perspective() transform function, where the length is provided by the value of the perspective property
Translate by the negated computed X and Y values of perspective-origin
But the following two boxes seem to have different effects：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
margin: 50px auto;
outline: 1px solid #000;
}
.box {
width: 100px;
height: 100px;
background-color: aqua;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="wrap" style="perspective: 100px; perspective-origin: top right">
<div class="box" style="transform: rotateY(30deg)"></div>
</div>
<div class="wrap">
<div
class="box"
style="
transform: translate(50px, -50px)
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.01, 0, 0, 0, 1)
translate(-50px, 50px) rotateY(30deg);
"
></div>
</div>
</body>
</html>
Is the transform corresponding to perspective-origin incorrect?
Related
Am trying to do a Minecraft Steve css art but the face isn't rendering.
I am an amateur by the way.
Here's my code
.container {
height: 500px;
width: 500px;
border-radius: 12.5%;
box-shadow: 15px 15px rgba(0,0,0,0.5);
top: 50%;
left: 50%;
background: RGB(255,255,255);
}
.face {
position: relative;
height: 80 px;
width: 80 px;
background: #B4846D;
top: 240px;
left: 240px;
}
Here's my HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="container"></div>
<div class="face"></div>
</body>
</html>
I think there are a couple of problems.
The first problem is that your link tag is missing the the closing <, which may prevent your css from loading correctly
Another problem is that you have a space between the 80 px on the height and width properties. Between the value and the unit there should be no space, so you should have height: 80px; and width: 80px;
another "problem" is that i think you want to have the face element inside the container element. Is it so?
Maybe you need:
<div class="container">
<div class="face"></div>
</div>
The next problem is the way you are positioning the .face element. Without an "image" to show us what you want to do it is difficult to know what you could improve, but i am guessing you want to add position: absolute to the .face element, so you can place it inside the .container element...
Here is an example:
.container {
height: 500px;
width: 500px;
border-radius: 12.5%;
box-shadow: 15px 15px rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
background: rgb(255, 255, 255);
position: absolute;
}
.face {
position: absolute;
height: 80px;
width: 80px;
background: #B4846D;
top: 240px;
left: 240px;
}
<div class="container">
<div class="face"></div>
</div>
Everything is okay except "the overflow".
When I put "overflow : hidden" in 'image-container', It s not work like sequential carousel.
But when I put "overflow : hidden" in 'carousel', It s work like sequential carousel.
I don't know what's the different with those things and Why is this happened?
let imgs = document.querySelector('.image-container');
let img = document.querySelectorAll('.image-container img');
let idx = 0;
function slideShow() {
idx++;
if (idx > img.length - 1) {
idx = 0;
}
imgs.style.transform = `translateX(${-idx*300}px)`;
}
setInterval(slideShow, 2000);
.carousel {
/*overflow: hidden;*/
}
.image-container {
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
height: 300px;
width: 300px;
display: flex;
}
img {
object-fit: cover;
height: 300px;
width: 300px;
}
<div class="carousel">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80" alt="" />
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="" />
<img src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="" />
<img src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80" alt="" />
</div>
</div>
If you set {overflow: hidden} to {image-container} then that means anything that is beyond the specified width of that container will be hidden.
So either you could increase the width of the {image-container}
.image-container {
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
height: 300px;
width: 1000px;
display: flex;
}
or you could use
.carousel {
overflow: hidden;
}
Im trying to position the div element in the center responsively but the top-left corner act as I want (it goes to center instead of the whole div) what should I do?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<div class="container"></div>
<input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()"></button>
<p id="text"></p>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
body {
background-color: rgba(75, 75, 75, 0.7); }
.container {
background-color: white;
height: 360px;
width: 640px;
position: absolute;
top: 50%;
left: 50%;
}
Using translate(-50%,-50%) it would shift in Y and X axis to 50% of its height and width.
body {
background-color: rgba(75, 75, 75, 0.7);
}
.container {
background-color: white;
height: 200px;
width: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /** add this **/
}
<!DOCTYPE html>
<html>
<body>
<div class="container"></div>
<input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()">
<p id="text"></p>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
Using flex-basis for column widths. Why does COLUMN02 extend beyond the browser's edge? What am I doing wrong? Unfortunately it does not show in the code snippets here but it does in the the fiddle. TIA!
http://jsfiddle.net/dragontheory/37b8vkoa/1/
html,
body {
min-height: 100vh;
/* force footer to bottom of browser */
height: 100%;
/*for IE11*/
}
.page-header,
.page-footer {
padding: 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.column01 {
-webkit-box-flex: 0 0 200px;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
background-color: rgba(0, 0, 0, 0.1);
}
.column02 {
-webkit-box-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
background-color: rgba(0, 0, 0, 0.2);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container-fluid d-flex flex-column px-0">
<div class="page-footer p-2">HEADER</div>
<main class="row flex-fill no-gutters flex-nowrap">
<div class="col column01 d-flex flex-column">COLUMN01</div>
<div class="col column02 d-flex flex-column">COLUMN02</div>
</main>
<div class="page-footer p-2">FOOTER</div>
</body>
It's your custom CSS that's causing it:
.column02 {
flex: 0 0 auto;
}
.col {
width: 100%;
}
... which translates into:
flex-grow: 0 (do not allow flex to grow this element)
flex-shrink: 0 (do not allow flex to shrink this element)
flex-basis: auto (get flex-basis from width - which is set to 100% by .col)
Which blocks the width of that column to the width of its parent and does not allow it to shrink down, regardless of the fact the sum of the children's widths exceeds the width of the parent.
Setting any of the following on .column02 will fix it:
flex-shrink: 1
width: auto; flex-grow: 1;
flex-basis: 0; flex-grow: 1;
flex: 1;
Or simply remove flex: 0 0 auto; (because .col already sets flex-basis: 0; flex-grow: 1; - third case above).
Addition:
For your resizable panels to work, I recommend placing the entire required markup inside one column:
$(function() {
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
})
html,
body {
min-height: 100vh;
height: 100%;
}
.page-header,
.page-footer {
padding: 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 210px;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 120px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
xtouch-action: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<body class="container-fluid d-flex flex-column px-0">
<div class="page-footer p-2">HEADER</div>
<main class="row flex-fill no-gutters flex-nowrap">
<div class="col panel-container">
<div class="panel-left">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
</main>
<div class="page-footer p-2">FOOTER</div>
</body>
I've started work on a brand new site and i've been playing around with designs for a while, however one problem I seem to be having is regarding positioning a navigation bar with a full screen width that is fixed to scroll. Underneath i have created a div called "wrapper" which is set to centre at a width of 980px. Below is code example;
<style>
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
}
#wrapper {
margin: 0 auto;
width: 980px;
}
</style>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div>
</div>
The box i created within "wrapper" SHOULD (obviously isn't because i'm doing something wrong - somewhere) sit 5px below the navBar, however because I have used position: fixed it sits underneath it instead. Could anybody lead me to how I solve this issue and have it so that the wrapper sits directly below rather than underneath the navbar whilst maintaining it's centering?
set top:0 on your navbar and add 30px margin-top on your wrapper div
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top:0
}
#wrapper {
margin: 30px auto 0;
width: 980px;
}
http://jsfiddle.net/duncan/NkRxQ/
Complete solution to solve your problem.
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top: 0;
}
#wrapper {
margin: 30px auto;
width: 980px;
background: #ccc;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 400px;">
<!-- You can create left side elements here (without any float specification in CSS) -->
</div>
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 556px;">
<!-- You can create right side elements here (without any float specification in CSS) -->
</div>
<div class="clear"></div>
</div>
</body>
</html>
Starting brand new site should contain DOCTYPE and 0 margin for all tags. (Very helpful thing).