Line through effect 3D

index.pug

- let text = 'Good day!';
- let arr = text.split('');

h1(role='image' aria-label=text)
	each letter in arr
		span(class='letter '+letter) #{letter}

line-through-effect-3d.markdown

Line through effect 3D

A Pen by Ana Tudor on CodePen.

License.

style.css

h1 {
	--dash-width: .125em;
	--letter-tilt-angle: 60deg;
	--scale-to-stretch-back-tilted-letter: 2;
	--half-dash-width: calc(var(--dash-width) / 2);
	--slope-up: rotateY(calc(1 * var(--letter-tilt-angle))) scaleX(var(--scale-to-stretch-back-tilted-letter));
	--slope-down: rotateY(calc(-1 * var(--letter-tilt-angle))) scaleX(var(--scale-to-stretch-back-tilted-letter));
	display: flex;
	position: relative;
	padding: 0 var(--half-dash-width);
	transform-style: preserve-3d;
	font: 900 10vw chilanka, segoe script, purisa, comic sans ms, cursive;
  }
  
  h1::after {
	position: absolute;
	top: calc(50% - var(--half-dash-width));
	right: 0;
	width: calc(50% + 50vw);
	height: var(--dash-width);
	border-radius: 0 var(--dash-width) var(--dash-width) 0;
	background: crimson;
	animation: slide 2s ease-out;
	content: '';
  }
  
  @keyframes slide {
	from {
	  transform: translate(-100%);
	}
  }
  .letter:nth-child(2n+1) {
	transform: var(--slope-down);
  }
  
  .letter {
	color: var(--c);
	overflow: visible;
	white-space: pre;
	transform: var(--slope-up);
  }
  
  .letter.\! {
	transform: translateZ(1px);
  }
  
  body {
	display: grid;
	place-content: center;
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: url(https://images.unsplash.com/photo-1484313544071-4d67c88b99be?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/cover;
  }